日本語
Expo (React Native) の認証を Logto で構築する
Logto SDK を統合することで、Expo (React Native) を使用したユーザー認証フローの構築方法を学びましょう。
Gao
Founder
Founder
Logto SDK を統合することで、Expo (React Native) を使用したユーザー認証フローの構築方法を学びましょう。
このチュートリアルでは、Logto SDKを統合してExpo (React Native)でユーザー認証フローを構築する方法を紹介します。チュートリアルでは、プログラミング言語としてTypeScriptを使用します。
始める前に、以下を確認してください:
始めるには、「Native」タイプのLogtoアプリケーションを作成します。Logtoアプリケーションを作成する手順は次のとおりです:
その後、Expo (React Native)アプリケーションとLogto SDKを統合するプロセスを案内するインタラクティブガイドが表示されます。以下の内容は将来の参考資料として使用できます。
お気に入りのパッケージマネージャーを使用して、Logto SDK とピア依存関係をインストールします:
@logto/rn パッケージは Logto の SDK です。残りのパッケージはそのピア依存関係です。Expo CLI ではネイティブモジュールのすべての依存関係をルートプロジェクトの package.json 内に直接インストールする必要があるため、直接の依存関係としてリストすることができませんでした。
LogtoProvider をインポートして使用し、Logto コンテキストを提供します:
Logto コンソールのアプリケーション詳細ページに切り替えます。ネイティブリダイレクト URI を追加します (例えば io.logto://callback)。その後、「保存」をクリックします。
iOS の場合、ASWebAuthenticationSession クラスがリダイレクト URI を登録されたかどうかに関係なくリスンするため、リダイレクト URI スキームは特に重要ではありません。
Android の場合、リダイレクト URI スキームは必ず Expo の app.json ファイルに記入してください。例えば:
次にアプリに戻り、useLogto フックを使用してサインインとサインアウトを行います:
ユーザーの情報を表示するには、getIdTokenClaims() メソッドを使用します:
これでアプリケーションを実行し、Logtoでサインイン/サインアウトを試すことができます:
統合中に問題が発生した場合は、Discordサーバーに参加して、コミュニティやLogtoチームとチャットしてください！