Expo (React Native) の認証を Logto で構築する
Logto SDK を統合することで、Expo (React Native) を使用したユーザー認証フローの構築方法を学びましょう。
Founder
はじめに
イントロダクション
- Logtoは、アイデンティティインフラストラクチャを構築するためのオープンソースのAuth0代替です。ユーザー名、メール、電話番号、GoogleやGitHubなどの人気のあるソーシャルサインインを含む、さまざまなサインイン方法をサポートしています。
- Expo (React Native) React を使用して Android、iOS、および Web 上で動作する汎用ネイティブアプリを作成するためのツールエコシステムです。
このチュートリアルでは、Logto SDKを統合してExpo (React Native)でユーザー認証フローを構築する方法を紹介します。チュートリアルでは、プログラミング言語としてTypeScriptを使用します。
前提条件
始める前に、以下を確認してください:
- Logtoアカウント。持っていない場合は、無料でサインアップできます。
- An Expo (React Native)開発環境とプロジェクト。
Logtoアプリケーションを作成する
始めるには、「Native」タイプのLogtoアプリケーションを作成します。Logtoアプリケーションを作成する手順は次のとおりです:
- Logtoコンソールにサインインします。
- 左側のナビゲーションバーで、アプリケーションをクリックします。
- アプリ ケーションを作成をクリックします。
- 開いたページで、「Native」セクションを見つけ、「Expo (React Native)」カードを見つけます。
- 構築を開始をクリックし、アプリケーションの名前を入力します。
- 作成をクリックします。
その後、Expo (React Native)アプリケーションとLogto SDKを統合するプロセスを案内するインタラクティブガイドが表示されます。以下の内容は将来の参考資料として使用できます。
Logto SDK の統合
インストール
お気に入りのパッケージマネージャーを使用して、Logto SDK とピア依存関係をインストールします:
@logto/rn パッケージは Logto の SDK です。残りのパッケージはそのピア依存関係です。Expo CLI ではネイティブモジュールのすべての依存関係をルートプロジェクトの package.json 内に直接インストールする必要があるため、直接の依存関係としてリストすることができませんでした。
Logto プロバイダーの初期化
LogtoProvider をインポートして使用し、Logto コンテキストを提供します:
サインインとサインアウトの実装
Logto コンソールのアプリケーション詳細ページに切り替えます。ネイティブリダイレクト URI を追加します (例えば io.logto://callback)。その後、「保存」をクリックします。
-
iOS の場合、
ASWebAuthenticationSessionクラスがリダイレクト URI を登録されたかどうかに関係なくリスンするため、リダイレクト URI スキームは特に重要ではありません。 -
Android の場合、リダイレクト URI スキームは必ず Expo の
app.jsonファイルに記入してください。例えば:
次にアプリに戻り、useLogto フックを使用してサインインとサインアウトを行います:
ユーザー情報 の表示
ユーザーの情報を表示するには、getIdTokenClaims() メソッドを使用します:
チェックポイント: アプリケーションを実行する
これでアプリケーションを実行し、Logtoでサインイン/サインアウトを試すことができます:
- ブラウザでアプリケーションを開くと、「サインイン」ボタンが表示されるはずです。
- 「サインイン」ボタンをクリックすると、Logtoのサインインページにリダイレクトされるはずです。
- サインインした後、アプリケーションにリダイレクトされ、ユーザーデータと「サインアウト」ボタンが表示されるはずです。
- 「サインアウト」ボタンをクリックすると、Logtoのサインアウトページにリダイレクトされ、その後、未サインイン状態でアプリケーションにリダイレクトされるはずです。
統合中に問題が発生した場合は、Discordサーバーに参加して、コミュニティやLogtoチームとチャットしてください！