【ReactNative】ログイン機能があるアプリでハマったあれこれ
はじめに
今回はReact Nativeアプリにおける「Googleアカウント」や「AppleID」などを用いたログインについての注意すべき点をまとめます。
私自身が実際にハマったポイントがいくつかあるので、そのあたりを中心に解説していきたいと思います。
主にApp Storeに公開するにあたってのReview(審査)で不合格となってしまったケースになります。
一度ブラウザに飛ばしてのログインはダメ
これはネイティブアプリの知識が全然なかった時代にやらかしたのですが、「アプリでログインボタンを押下」→「スマホブラウザを開きWebのログインページへ」→「Webページでログイン完了後、ネイティブアプリへリダイレクト」というフローは審査が通りません。
以下のような内容でリジェクトされます。
Guideline 4.0 - Design
We noticed that the user is taken to Safari to sign in or register for an account when selecting Google, which provides a poor user experience.
Next Steps
To resolve this issue, please revise your app to enable users to sign in or register for an account in the app.
We recommend implementing the Safari View Controller API to display web content within your app. The Safari View Controller allows the display of a URL and inspection of the certificate from an embedded browser in an app so that customers can verify the webpage URL and SSL certificate to confirm they are entering their sign in credentials into a legitimate page.
Resources
For additional information on the Safari View Controller API, please review the What's New in Safari webpage.
今にして思うと、そりゃあわざわざ面倒なログインフローにしたら怒られるわ、といった感じです。
当時はWeb周りの知識しかなかったので、そちらの技術で無理矢理解消しようとしてこのような処理にしていたと記憶しています。
対処法は、素直にアプリ上でログインできるようにしましょう。
サードパーティのログインをするならAppleサインインは必須
特にAppleに申請を出す場合ですが、Googleアカウントのようにサードパティのログインを実装している場合は「Appleサインイン」も必須になります。
Appleサインインを実装せずに申請を出すと、下記のような内容でリジェクトされます。
Guideline 4.8 - Design - Sign in with Apple
We noticed that your app uses a third-party login service but does not offer Sign in with Apple. Apps that use a third-party login service for account authentication must offer Sign in with Apple to users as an equivalent option.
Next Steps
To resolve this issue, please revise your app to offer Sign in with Apple as an equivalent login option.
Resources
Review the sample code on Apple Developer Support to learn more about implementing Sign in with Apple in your app.
Read the Sign in with Apple Overview to learn more about the benefits Sign in with Apple offers users and developers.
Please see attached screenshot for details.
Apple側の言い分としては 「うちのプラットフォームでアプリを出すなら、うちのアカウントを使ったログインも実装してよ」 といったニュアンスでしょうか。
幸いReact NativeではいくつかのライブラリがAppleサインインの機能を提供しているので、そこまで実装の苦労はないはずです。
過去に使用した実績があるものだとreact-native-apple-authenticationがあります。
Appleサインインの後に追加の情報を入力させてはいけない
後からAppleサインインに対応した場合にありがちなのですが、少なくともAppleサインインの場合は「追加情報の入力」をさせることができません。
例えば、 「Appleサインイン完了」→「Appleアカウントから読み取れなかった、居住地や年齢などの情報を入力させる画面を表示」 というのもアウトです。
その場合、下記のような内容でリジェクトされます。
Guideline 5.1.1 - Legal - Privacy - Data Collection and Storage
We noticed that after users authenticate their account with Sign in with Apple, they are required to take additional steps before they can access content and features in your app. Specifically:
- Your app requires users to provide their name and birth year after using Sign in with Apple.
Sign in with Apple is designed to be a self-contained, all-in-one login system. With security features like built-in two-factor authentication, you can remove additional sign-up steps so users can focus on your app's content and features.
Next Steps
To resolve this issue, please revise your app so the user is not required to provide additional information or take unnecessary steps after using Sign in with Apple.
Resources
- Learn more about Data Management with Sign in with Apple.
- See how to contact users with anonymized emails using the Private Email Relay Service.
過去にこれでハマった時はなかなか苦労しました。
というのも、提供しているアプリの機能的に「Appleアカウント」から取得できる情報だけでは不完全で、いくつか必須項目として入力してもらう必要があったからです。
ただ、いったんログインを完了してしまえば、その後で色々と入力してもらうのはアリなようで、その時は 「Appleサインイン完了」→「ログイン後の画面表示」→「アプリ上で何かしたアクションを起こそうとした際に、不足している情報があれば入力画面に飛ばす」 といったフローに切り替えたところ、審査が通りました。
Googleログインもライブラリを使う
Appleサインインと同様、Googleログインもライブラリを使用しておくのが無難です。
私自身が使ったことがあるものの中だと、react-native-google-signin/google-signinが使いやすかった印象です。
まとめ
今回はReact Nativeアプリにおけるログインに関するTips的な情報を記事にしました。
React Nativeと銘打ちましたが、ネイティブやFlutter,Xamarinなどの他のクロスプラットフォーム開発でも同じことがいえると思います。
それなりの規模のアプリになってくると、ログインやアカウント管理はマストといっても過言ではなく、その際には守っておかないと後々苦労するお作法がいくつかあります。
そういった箇所でハマってしまう方が少しでも減れば幸いです。
Discussion