Logto で Angular 認証を構築する
Angular OIDC クライアントライブラリを統合して、Angular でユーザー認証フローを構築する方法を学びます。
Founder
はじめに
イントロダクション
- Logtoは、アイデンティティインフラストラクチャを構築するためのオープンソースのAuth0代替です。ユーザー名、メール、電話番号、GoogleやGitHubなどの人気のあるソーシャルサインインを含む、さまざまなサインイン方法をサポートしています。
- Angular は Google によって作成および保守されているウェブ開発フレームワークです。
このチュートリアルでは、Logto SDKを統合してAngularでユーザー認証フローを構築する方法を紹介します。チュートリアルでは、プログラミング言語としてTypeScriptを使用します。
前提条件
始める前に、以下を確認してください:
- Logtoアカウント。持っていない場合は、無料でサインアップできます。
- An Angular開発環境とプロジェクト。
Logtoアプリケーションを作成する
始めるには、「シングルページアプリ」タイプのLogtoアプリケーションを作成します。Logtoアプリケーションを作成する手順は次のとおりです:
- Logtoコンソールにサインインします。
- 左側のナビゲーションバーで、アプリケーションをクリックします。
- アプリケーションを作成をクリックします。
- 開いたページで、「シングルページアプリ」セクションを見つけ、「Angular」カードを見つけます。
- 構築を開始をクリックし、アプリケーションの名前を入力します。
- 作成をクリックします。
その後、AngularアプリケーションとLogto SDKを統合するプロセスを案内するインタラクティブガイドが表示されます。以下の内容は将来の参考資料として使用できます。
プロジェクトに Logto を統合する
インストール
Logto JS コア SDK と Angular OIDC クライアントライブラリをインストールします:
アプリケーション設定
Angular プロジェクトで、app.config.ts に認証プロバイダーを追加します:
サインインとサインアウトを実装する
リダイレクトURIを構成する
Logtoコンソールのアプリケーション詳細ページに切り替えます。リダイレクトURIhttp://localhost:3000/callbackを追加します。
リダイレクトURIは、認証後にリダイレクトする場所を示すOAuth 2.0の概念です。
同様に、「ログアウト後のリダイレクトURI」セクションにhttp://localhost:3000/を追加します。
ログアウト後のリダイレクトURIは、ログアウト後にリダイレクトする場所を示すOAuth 2.0の概念です。
次に、「保存」をクリックして変更を保存します。
サインインとサインアウトを実装したいコンポーネント (例えば、app.component.ts) で OidcSecurityService を注入し、それを使用してサインインおよびサインアウトを行います。
次に、テンプレート内にサインインおよびサインアウトのボタンを追加します:
認証状態の購読とユーザー情報の表示
OidcSecurityService は認証状態に簡単に購読する方法を提供します:
そしてテンプレートで使用します:
チェックポイント: アプリケーションを実行する
これでアプリケーションを実行し、Logtoでサインイン/サインアウトを試すことができます:
- ブラウザでアプリケーションを開くと、「サインイン」ボタンが表示されるはずです。
- 「サインイン」ボタンをクリックすると、Logtoのサインインページにリダイレクトされるはずです。
- サインインした後、アプリケーションにリダイレクトされ、ユーザーデータと「サインアウト」ボタンが表示されるはずです。
- 「サインアウト」ボタンをクリックすると、Logtoのサインアウトページにリダイレクトされ、その後、未サインイン状態でアプリケーションにリダイレクトされるはずです。
統合中に問題が発生した場合は、Discordサーバーに参加して、コミュニティやLogtoチームとチャットしてください！