Download to read offline
初めてのAuth0ハンズオン
- 1.
- 2. auth0.com ハンズオン概要 ü Auth0を利⽤した認証・認可の基本的な実装⽅法を短時間で習得する ü ログイン・テナントの作成 üApplicationの登録〜認証機能の統合 ü Social Connection・MFAの設定 ü APIの登録〜API Protectionの概要 ü Dashboard Walk-through ü 今後の進め⽅ご相談 ⽬的 タイムテーブル 対象者 ü OIDC/OAuth2.0の基本概念を習得済み ü ソフトウェア開発・運⽤の経験を有する ü 開発エディタを⽤いたコーディング作業が可能 ü Unix/Linux/Macのコマンドライン操作が可能
- 3. auth0.com 何故Auth0を使うのか? 1から実装 外部調達 ログイン・サインアップ SAML, AD/LDAPとの連携 Google,Facebook等ソーシャルログイン デバイス・モバイルアプリ APIセキュリティ ユーザ管理 多要素認証 ビジネス機能 SDKの利⽤と数⾏のコード ビジネス機能 0 Days 45 Days 90 Days ビルディングブロックによる設定
- 4. auth0.com Auth0を⽤いた認証・認可機能実装の流れ 1. Auth0にApplicationを登録 2-a. 既存のApplicationにAuth0の認証機能を統合 2-b.Auth0の認証機能が実装済みのサンプルを⼊⼿して新規にApplicationを実装 3. Auth0にAPIを登録、Scopeを設定
- 5. auth0.com API GitHubリポジトリのSample Code 65以上の⾔語に対応したSDK API/SDK/Sample Codeの構造 AuthenticationAPI(例/Login, Logout) Management API(例/User Create, Delete)
- 6. auth0.com Auth0 Dashboardへのログイン・テナントの作成 1. Chromeでhttps://auth0.comにアクセスします。 2.画⾯右上の”SIGN UP”を押します。 3. 任意のEメールアドレスでアカウントを作成します。アカウントが作成されると⾃動的 に開発⽤のテナントが作成され、このユーザがテナント管理者になります。 4. 画⾯右上の管理者の写真をクリックし て”Create tenant”を選択します。 5. 任意のドメイン名を指定、その他はデフォルト のまま”CREATE”ボタンを押します。
- 7. auth0.com Applicationの登録〜認証機能の統合 1/5 1. 左ペインで”Applications”をクリック、画⾯右上の”CREATEAPPLICATION”を 押します。 2. 任意の名前を⼊⼒、“Choose an application type”で”Single Page Web Applications”を選択し て”CREATE”を押します。 3. Auth0が事前に準備しているSDKを 選択する画⾯で“React”を押します。
- 8. auth0.com Applicationの登録〜認証機能の統合 2/5 4. 画⾯下の”VIEWON GITHUB”を押してサ ンプルのRepositoryにアクセスします。 5. RepositoryをCloneします。Branch は”master”です。(2019年8⽉現在) $ git clone https://github.com/auth0-samples/auth0-react-samples.git
- 9. auth0.com Applicationの登録〜認証機能の統合 3/5 6. “Settings”タブをクリック、”AllowedCallback URLs“, “Allowed Web Origins”, “Allowed Logout URLs”にhttp://localhost:3000を⼊⼒して画⾯下の”SAVE CHANGES”を押します。 Login, Logout後にリダイレクトするURLをAuth0に申告しています。
- 10. auth0.com Applicationの登録〜認証機能の統合 4/5 7. 01-Login/src配下のauth_config.json.exampleをコピーしてauth_config.jsonを作成しま す。サンプルとAuth0のDashboardで作成したApplicationを紐付けるために、この JSONに作成したApplicationのID,テナントのドメイン名を指定します。 8. package.jsonに記載されているパッケージをインストールしてApplicationを起動します。 (PCの管理者権限を持っていることを前提としています。) $ pwd ~/auth0-react-samples/01-Login/src $ cp auth_config.json.example auth_config.json $ vi auth_config.json { "domain": ”xxxx.auth0.com", "clientId": ”xxxx" } $ pwd ~/auth0-react-samples/01-Login $ npm install $ npm start
- 11.
- 12. auth0.com Social Connection・MFAの設定 1/3 1.SocialアカウントでApplicationにログインできるようにします。例としてGoogle, Facebookを有効化します。左ペインの”Connections-Social”をクリックしGoogle, Facebookのフリップスイッチをオンにします。”Settings”および”Applications”の内容を 確認してデフォルトのまま”SAVE”を押します。
- 13. auth0.com Social Connection・MFAの設定 2/3 2.Chromeでhttp://localhost:3000にアクセスして、”Continue with Google”, “Continue with Facebook”が表⽰されていることを確認します。いずれかをクリックしてログインし 左ペイン”User”をクリックしてログインしたユーザを確認します。
- 14. auth0.com Social Connection・MFAの設定 3/3 3.左ペインの”Multifactor Auth”をクリックして”Push via Auth0 Guardian”、”Always require Multi-factor Authentication”のフリップスイッチをオンにし、 Chromeで http://localhost:3000にアクセスします。モバイルデバイスからGuardianを起動、スキャ ンコードをスキャンしてログインします。
- 15. auth0.com APIの登録〜API Protectionの概要 1/5 1.Ctr-CでApplicationの登録〜認証機能の統 合で起動したApplicationを停⽌します。 2. 左ペインの”APIs”を選択して画⾯右上 の”CREATE API”を押します。 3. “Name”に任意の名前を、”Identifier”に http://localhost:3001を⼊⼒、”Signing Algorithm”でRS256を選択し て”CREATE”を押します。
- 16. auth0.com APIの登録〜API Protectionの概要 3/5 4.02-Calling-an-API/src配下のauth_config.json.exampleをコピーしてauth_config.json を作成します。このJSONに作成したApplicationのID, テナントのドメイン名、APIのIDを 指定します。 このサンプルはApplication/APIがセットになっているためApplicationの情報も合わせて設 定しています。 $ pwd ~/ auth0-react-samples/02-Calling-an-API/src $ cp auth_config.json.example auth_config.json $ vi auth_config.json { "domain": ”xxxx.auth0.com", "clientId": ”xxxx", "audience": "http://localhost:3001" }
- 17. auth0.com APIの登録〜API Protectionの概要 4/5 5.package.jsonに記載されているパッケージをインストールしてApplicationを起動します。 6. Chromeでhttp://localhost:3000にアクセスして任意のユーザでログインします。 7. “External API”->”Ping API”をクリックして下記のレスポンスが返ってきたら成功です。 このサンプルはAPI呼び出しのみのためRBAC, Scopeは設定していません。 $ pwd ~/ auth0-react-samples/02-Calling-an-API $ npm install $ npm run dev
- 18.