あなたの角度アプリにAutos 0を加える方法

Pro Tip: look out for the 🛠 emoji if you want to skim

クラウド上のアプリケーションの数が増えているので、それらを維持するための課題です.セキュア認証は、クラウドアプリケーションの構築におけるいくつかの課題を緩和する一つの方法です.
ここでは、あなたの角度アプリを使用して認証を追加する方法を示しますAuth0 .

認証とは

認証はいくつかの事実またはいくつかのドキュメントが本物であることを証明するプロセスを参照する用語です.
技術では、この用語は典型的にユーザのアイデンティティを証明することに関連しています.通常、ユーザはユーザ名とパスワードのように資格情報を提供することによってアイデンティティを証明します.
認証は認証と混同されません.認証はユーザが誰であるかを確かめる過程です、そして、認可は彼らがアクセスしているものを確認するプロセスです.

あなたのAuth

あなたがすでにAuth 0アカウントを持っていないならば、あなたは1つにサインアップして、それをセットアップする必要があります.次のようにします.

🛠 サインアップするAuth0 .

🛠 一旦サインアップしたら、あなたはAuth 0ダッシュボードに着陸しなければなりません.アプリケーションへの統合

🛠 あなたのアプリケーションのデータを入力します.単一のWebアプリケーションをアプリケーションの種類として選択します.

🛠 次に、ビルドするアプリケーションの種類を選択するように求められます.我々は角度のアプリを構築しているので、それを選択します.

あなたはすべての設定です!

プロジェクトの設定

上記の手順に従って、プロジェクトのページにする必要があります.タブを開始するに移動します.

🛠 まず最初にすることはあなたのクライアントのIDと秘密をメモします.

🛠 許可されたコールバックURLを設定し、ログアウトURLを許可し、Webの起源を許可する必要があります.今のところ、それらをすべて設定することができますhttp://localhost:4200 . プロダクションで使用するドメインに設定する必要があります.

これらは重要なものです、あなたは残りを後で満たすことができます.

プロジェクトの設定

🛠 まず最初に行う必要がある場合は角のアプリを作成する:

~$ ng new my-app
~$ cd my-app
~$ ng serve -o

🛠 新しいターミナルウィンドウ/ペインを開き、Auth 0 Angle SDKをインストールします.

~$ cd my-app
~$ npm install @auth0/auth0-angular

🛠 次は開くsrc/app/app.module.ts (デフォルトのアプリケーションモジュール)とインポートAuthModule SDKから:

import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {AppComponent} from './app.component';

import {AuthModule} from '@auth0/auth0-angular';

@NgModule({
    declarations: [AppComponent],
    imports: [
        BrowserModule,
        AuthModule.forRoot({
            domain: 'domain', // Domain from earlier
            clientId: 'clientid' // Client ID from earlier
        }),
    ],

    bootstrap: [AppComponent],
})
export class AppModule {}

エラーが発生した場合は、ng serve コマンド.新しいモジュールをインポートするときによく起こります.
🛠 次に、AuthService.loginWithRedirect() Auth 0のユニバーサルログインページにリダイレクトする

import {Component} from '@angular/core';
import {AuthService} from '@auth0/auth0-angular';

@Component({
    selector: 'app-root',
    template: '<button (click)="auth.loginWithRedirect()">Log in</button>'
})
export class AppComponent {
    constructor(public auth: AuthService) {}
}

そして、それは基本的にそれです!あなたがログインする能力を得た.

その他

🛠 あなたは能力を呼び出すことによってログアウトするために追加することができますAuthService.logout() .
🛠 また、ユーザープロファイル情報を取得することができますからAuthService.user$