Auth0を使用したEasy AngularJS認証-jsチュートリアル-php.cn

Auth0を使用したEasy AngularJS認証

Jennifer Aniston

リリース： 2025-02-16 11:02:09

オリジナル

839 人が閲覧しました

この記事は、Auth0のAPIの変更を反映するために更新されました（11.05.2017）。シングルページアプリケーション（SPA）の保護は困難です。スパは、多くの場合、個別のフロントエンド（Angularjsなど）とバックエンドデータAPIで構成されています。従来のセッションベースの認証は、APIに状態を導入し、休憩原則に違反し、モバイルアプリの統合を妨げるため、このアーキテクチャには不適切です。このアプローチの重要な利点：

ステートレス認証：

単純化されたユーザー管理：auth0ソーシャルログインやマルチプロファイルサポートなど、ユーザー認証管理を簡素化します。
合理化された統合：Auth0のライブラリとAngularJSモジュールは、認証プロセスを簡素化し、トークンの取り扱いとセッション管理を自動化します。
JWTSは、保護されたAPIエンドポイントにアクセスするときに、ローカルストレージに安全に保存されています。簡単なソーシャルログイン統合：
セキュアAPIエンドポイント：JWT検証を備えたnodeJSサーバーはAPIエンドポイントを保護し、認証されたユーザーのみが機密データにアクセスするようにします。
JSON Web Tokens（jwts）：ステートレスソリューション
JWTSは、セッションベースの認証の制限を克服します。このオープン標準は、AngularJSのフロントエンドからバックエンドAPIへのリクエストを認証します。重要なことに、JWTSにはカスタムクレーム付きのJSONペイロードが含まれています。 AngularJS認証実装 JWTSは、AngularJS認証に最適です。安全なAPIエンドポイントは、ユーザーのJWTをローカルストレージに保存し、HTTPリクエストの承認ヘッダーに含めることによりアクセスされます。無効または不足しているJWTSは、アクセスの拒否をもたらします

基本認証を超えて、堅牢なAngularJS実装には次のものが必要です

条件付きレンダリング：

JWTの有効性に基づく要素（ログイン/ログアウトボタン）を表示/非表示。

ルート保護：

認証されていないユーザーが特定のルートにアクセスしないようにします ui更新：

ユーザー状態が変更されたときにUIを更新します（jwt expiration、logout）。

このチュートリアルは、保護されたリソースアクセス用のNodeJSサーバーを含む、完全なAngularJS認証実装を示しています。ユーザーデータベースとJWT発行を構築する代わりに、Auth0の無料層（最大7,000人のアクティブユーザー）を活用します。ソーシャルログイン統合も表示されます

（画像：auth0ダッシュボード）

auth0 setup
1. auth0アカウントを作成します：auth0アカウントにサインアップして、ドメイン名（例：yourcompany.auth0.com）を選択します。これは後で変更することはできません。
2. デフォルトのアプリを構成します：auth0ダッシュボードで、クライアントセクションに移動し、デフォルトのアプリにアクセスします。許可されたOrigins および許可されたコールバックurls（たとえば、このチュートリアルの）を構成します。 http://localhost:8080
3. を作成しますapisセクション、新しいAPIを作成します。アプリケーション）。 ソーシャルアイデンティティプロバイダーを有効にする（オプション）：接続のオプションを切り替えることにより、ソーシャルログイン（Google、Facebookなど）を有効にします＆gt;
4. セクション。インストールと構成
を使用）：

を使用してサーバーを起動します。 Auth0を統合するには、
およびbower installを構成します。プレースホルダーの値をauth0資格情報に置き換えます：
```
npm install -g http-server
```
ログイン後にコピー
http-serverファイルは、認証後にハッシュを解析する処理を処理します：app.js index.html
```
// app.js (snippet)
angularAuth0Provider.init({
  clientID: AUTH0_CLIENT_ID,
  domain: AUTH0_DOMAIN,
  responseType: 'token id_token',
  redirectUri: AUTH0_CALLBACK_URL,
  audience: AUTH0_API_AUDIENCE,
});
```
ログイン後にコピー
（画像：Angularjsログインページ）
app.run.js
```
// app.run.js (snippet)
authService.handleParseHash();
```
ログイン後にコピー
（画像：Angularjsログイン状態）
（画像：Angularjsログアウト状態）
ホームページの作成
ファイルは、ログイン/ログアウトボタンとAPIコールボタンを備えたシンプルなUIを提供します。
ファイルは、：を使用してAPI呼び出しを処理します

home.html認証サービス（home.controller.js）$http
```
// home.controller.js (snippet)
vm.getSecretMessage = function() {
  $http.get('http://localhost:3001/api/private', {
    headers: { Authorization: 'Bearer ' + localStorage.getItem('access_token') }
  })
  .then(...)
  .catch(...);
};
```
ログイン後にコピー
このサービスは、ログイン、ログアウト、および認証状態管理を処理します
auth.service.jsnodejsサーバーの作成

express、
、
```
// auth.service.js (snippet)
function authService($state, angularAuth0, authManager) {
  // ... login, handleParseHash, logout, isAuthenticated functions ...
}
```
ログイン後にコピー
、および
：を使用してnodejsサーバーを作成します

でサーバーを起動します。 AngularJSアプリは、保護されたAPIエンドポイントにリクエストを行うことができます。 express-jwtjwks-rsaさらなる考慮事項とFAQ cors

この記事は、追加のAuth0機能（SSO、Passwordless Login、MFA）およびその他のサポートされているバックエンドおよびモバイルSDKのセクションで終了します。包括的なFAQセクションでは、ソーシャルログイン、セッション管理、ルートセキュリティ、トークンリフレッシュ、エラー処理、カスタマイズ、マルチファクター認証、フック、テスト、デバッグに関する一般的な質問に対処します。 {YOUR-AUTH0-DOMAIN}や{YOUR-AUTH0-API-AUDIENCE}などのプレースホルダーを実際のauth0値に置き換えることを忘れないでください。

以上がAuth0を使用したEasy AngularJS認証の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。