日本語
Logto で Angular 認証を構築する
Angular OIDC クライアントライブラリを統合して、Angular でユーザー認証フローを構築する方法を学びます。
Gao
Founder
Founder
Angular OIDC クライアントライブラリを統合して、Angular でユーザー認証フローを構築する方法を学びます。
このチュートリアルでは、Logto SDKを統合してAngularでユーザー認証フローを構築する方法を紹介します。チュートリアルでは、プログラミング言語としてTypeScriptを使用します。
始める前に、以下を確認してください:
始めるには、「シングルページアプリ」タイプのLogtoアプリケーションを作成します。Logtoアプリケーションを作成する手順は次のとおりです:
その後、AngularアプリケーションとLogto SDKを統合するプロセスを案内するインタラクティブガイドが表示されます。以下の内容は将来の参考資料として使用できます。
Logto JS コア SDK と Angular OIDC クライアントライブラリをインストールします:
Angular プロジェクトで、app.config.ts に認証プロバイダーを追加します:
Logtoコンソールのアプリケーション詳細ページに切り替えます。リダイレクトURIhttp://localhost:3000/callbackを追加します。
リダイレクトURIは、認証後にリダイレクトする場所を示すOAuth 2.0の概念です。
同様に、「ログアウト後のリダイレクトURI」セクションにhttp://localhost:3000/を追加します。
ログアウト後のリダイレクトURIは、ログアウト後にリダイレクトする場所を示すOAuth 2.0の概念です。
次に、「保存」をクリックして変更を保存します。
サインインとサインアウトを実装したいコンポーネント (例えば、app.component.ts) で OidcSecurityService を注入し、それを使用してサインインおよびサインアウトを行います。
次に、テンプレート内にサインインおよびサインアウトのボタンを追加します:
OidcSecurityService は認証状態に簡単に購読する方法を提供します:
そしてテンプレートで使用します:
これでアプリケーションを実行し、Logtoでサインイン/サインアウトを試すことができます:
統合中に問題が発生した場合は、Discordサーバーに参加して、コミュニティやLogtoチームとチャットしてください！