初めてAuth0を触る方向けのハンズオン手順書です。

1. auth0.com
Auth0株式会社
2019年11⽉
初めてのAuth0ハンズオン

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の構造
Authentication API(例/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”をクリック、画⾯右上の”CREATE APPLICATION”を
押します。
2. 任意の名前を⼊⼒、“Choose an
application type”で”Single Page
Web Applications”を選択し
て”CREATE”を押します。
3. Auth0が事前に準備しているSDKを
選択する画⾯で“React”を押します。

8. auth0.com
Applicationの登録〜認証機能の統合 2/5
4. 画⾯下の”VIEW ON 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”タブをクリック、”Allowed Callback 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. auth0.com
Applicationの登録〜認証機能の統合 5/5
9. Chromeでhttp://localhost:3000にアクセスしてApplicationにログインするユーザを
Sign-upします。
10.ApplicationがAuth0にアクセスすることに対するConsentの画⾯で”Accept”を押します。
11.左ペインの”User”を押してSign-upしたユーザが作成されていることを確認します。

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. auth0.com
ありがとうございました