Upgrade to Pro — share decks privately, control downloads, hide ads and more …

IDaaS(Auth0) vs OSS(Keycloak)vs Managed(Amazon ...

IDaaS(Auth0) vs OSS(Keycloak)vs Managed(Amazon Cognito)

Future Tech Night # 19

future-yamada

July 21, 2021
Tweet

Other Decks in Programming

Transcript

  1. 自己紹介 • 山田 勇一 • フューチャー株式会社 Technology Innovation Group所属 ◦ 新卒から3社目 &

    フューチャー入社後 10年の42歳(白髪増加中の悲しみ) ◦ 40超えているんだから、過去の経歴でドヤるページですが、ノーマルエンジニアなのでドヤれま せん。 • 趣味 ◦ なし(1日の過ごし方考えてたら 1日が終わるタイプ ◦ ひねり出すと子育・楽しいですよ
  2. はじめに ハンズオンは下の流れで、アプリケーションを動かすところまで見てみます。 一回動かせれば、そこから広げていけますからね。 • 完全に0からスタートします • アプリケーションはVue.jsで実装します ◦ 時間の都合もあり、node /

    vue-cliは動く前提で書いちゃいます。ごめんなさい。 ◦ 機能を確かめたい場合、 vue2系のほうが動く気がします。 ◦ とにかく動かすことを優先して、可能な限りコピペ出いける方法を考えます。 • 動かすときに必要な、参照先URLは可能な限りご紹介します
  3. Auth0 2. Vueを設定する vue3は実は初めてです。 auth0 + vue3でググり、それっぽいソースコードがあったのでこちらを参考にしてみま す。 https://gist.github.com/K3TH3R/416e5c6627436fa87db16f57f50496d 適用手順は

    1. Quick Startをそのままコピペ 2. 参考ページをそのままコピペ(Quick Start無視して良いです) auth_config.json src/App.vue src/views/Home.vue src/views/Profile.vue src/main.js src/auth/index.js src/router/index.js
  4. Auth0 2. Vueを設定する 3.少し編集 import { domain, clientId } from

    "../auth_config.json"; ...省略 const AuthPlugin = await Auth.init({ domain: domain, clientId: clientId, onRedirectCallback: (appState) => { router.push( appState && appState.targetUrl ? appState.targetUrl : window.location.pathname ); }, }); src/main.js client = await createAuth0Client({ domain: options.domain, client_id: options.clientId, audience: options.audience, redirect_uri: redirectUri, }) src/auth/index.js Quick Startに合わせて、設定ファイル から、Auth0の設定を読み込めるように 修正。 元のソースは環境変数から読む形に なっており、そちらのほうが実装は良い と思います。
  5. Auth0 2. Vueを設定する 3.少し編集 <template> ...省略 <!-- Check that the

    SDK client is not currently loading before accessing is methods --> <div v-if="!$auth.loading.value"> <!-- show login when not authenticated --> <button v-if="!$auth.isAuthenticated.value" @click="login">Log in</button> <!-- show logout when authenticated --> <button v-if="$auth.isAuthenticated.value" @click="logout">Log out</button> </div> ...省略 </template> src/views/Home.vue(その他vueファイルも同様) ...省略 const state = reactive({ loading: true, isAuthenticated: false, user: {}, popupOpen: false, error: null, }) ...省略 src/auth/index.jp auth/index.jsのstateは reactiveで宣言されているた め、$atuhのプロパティは valueから取得する形に修 正。 その他のvueも全て同様で す。
  6. keycloak 3.Keycloak動かしてみる 設定を進めると動いちゃうので、ポイントのみご紹介です。 • Quick Start 手順上でもCloneしますが、こちらに各種アプリケーションのQuick Startが入っ ているので、Client要件確認するのに良さそうです。 https://github.com/keycloak/keycloak-quickstarts

    • Keycloakとアプリケーションの接続設定 「Client Configuration」が、Keycloakとアプリケーションの接続設定になるの で、「繋がらない」などのトラブルはここを見ると解決にたどり着けるケースが多 いと思います。
  7. Cognito 動かすまでにやったこと • 所要時間 1時間 - 2時間(試行錯誤・無駄作業2-3時間くらい) 1. AWSコンソールからCognitoを使い始めてみる(←無駄でした 2.

    AWS Amplify初期化 3. AWS Amplifyに認証機能(Cognito)を追加 4. Vueセットアップ 5. (SSOとか見据えて)Cognitoのhosted UIとつないでみる(←無駄でした
  8. Cognito 2.Amplify初期化 amplify initを実行し • Vueに各種Configを追加します。 • AWS Amplifyにリソースアプリケーション設定を追加します。 事前に設定しているIAMユーザを指定します。

    amplify init ...省略 ? Initialize the project with the above configuration? Yes ? Select the authentication method you want to use: AWS profile ? Please choose the profile you want to use ${IAMユーザー} ここで一回ハマっていて、 Proxy経 由の場合、環境変数を大文字にし ないとネットワークエラーが発生しま す。 CLI/CloudFormationどちらかの制 約だと思います、詳細までは見切れ ていません。
  9. Cognito 3.AWS Amplifyに認証機能(Cognito)を追加 amplify add auth Using service: Cognito, provided

    by: awscloudformation The current configured provider is Amazon Cognito. Do you want to use the default authentication and security configuration? ❯ Default configuration Default configuration with Social Provider (Federation) Manual configuration I want to learn more. add authで認証機能(cognito)を追加します。 とにかく動かしたいのみなので、ま ずはデフォルトで突き進みます。
  10. Cognito 3.AWS Amplifyに認証機能(Cognito)を追加 The current configured provider is Amazon Cognito.

    Do you want to use the default authentication and security configuration? Default configuration Warning: you will not be able to edit these selections. How do you want users to be able to sign in? Username Email Phone Number ❯ Email or Phone Number I want to learn more. 認証時のID設定です。 どれでも良いのですが、 メール or 電話番号を指定してみま す。
  11. Cognito 3.AWS Amplifyに認証機能(Cognito)を追加 Do you want to use the default

    authentication and security configuration? Default configuration Warning: you will not be able to edit these selections. How do you want users to be able to sign in? Email or Phone Number Do you want to configure advanced settings? (Use arrow keys) ❯ No, I am done. Yes, I want to make some additional changes. よけいな設定もしないので、ここで 終わります。 追加があればセットアップ後にやれ ばいいと思います。
  12. Cognito 3.AWS Amplifyに認証機能(Cognito)を追加 amplify push ✔ Successfully pulled backend environment

    dev from the cloud. Current Environment: dev | Category | Resource name | Operation | Provider plugin | | -------- | ------------------------- | --------- | ----------------- | | Auth | amplifycognitovue56ddd63d | Create | awscloudformation | ? Are you sure you want to continue? (Y/n) 最後にpush することで、AWSにデプロイされます。
  13. Cognito 5.(SSOとか見据えて)Cognitoのhosted UIとつないでみる import Amplify, * as AmplifyModules from 'aws-amplify';

    import {Auth} from 'aws-amplify'; import {AmplifyPlugin } from 'aws-amplify-vue' import awsconfig from './aws-exports' Vue.use(AmplifyPlugin, AmplifyModules) Amplify.configure(awsconfig) Auth.configure({ Auth: { region: 'us-east-1', userPoolId: '${ユーザプールの ID}', userPoolWebClientId: ${「アプリクライアントの設定」より IDをコピー}, oauth: { domain: '${設定したドメイン }.auth.us-east-1.amazoncognito.com', scope: ['email', 'profile', 'openid'], redirectSignIn: '${設定したコールバック }', redirectSignOut: '${設定したコールバック }', responseType: 'code' } }, }); main.js main.jsのimport直下に追加してください。 Auth.configureは、Cognitoの設定と確実に合わせてください。 末尾の”/”も合わせないとエラーになり、動きません ※”/”ありなしで10分くらいハマりました。
  14. Cognito 5.(SSOとか見据えて)Cognitoのhosted UIとつないでみる import { Auth, Hub } from "aws-amplify";

    ...省略 methods: { // ログイン画面へ遷移 signIn: () => { // cognitoへダイレクト // federatedSignInの引数にidpを渡すとhostdUI以外の認証も利用可能(のようです // ログイン状態の監視など、詳細はこちらをご覧ください // https://docs.amplify.aws/lib/auth/social/q/platform/js#setup-frontend Auth.federatedSignIn(); }, // ログアウト signOut: () => { Auth.signOut().catch(err => console.log(err)); } }, ログインボタンを置くcomponentに以下を追加してください。
  15. 比較 コスト • 考え方 概ねどのIDaaSもMAU(monthly active user)単位で料金体系が決まっています。 MAUの数え方は各社異なるので、個別に確認頂きたいのですが、ざっくりいうと 1ヶ月のあいだに 1回でもログインされば

    MAUに入ってくる と思います。 • プラン Auth0だけ少しむずかしいです。 ◦ Auth0 Pricingページ的には(おそらく)以下を想定しているように見えました ▪ 用途 B2C :Auth0自身をIdpとして利用し、ユーザ数を MAUでカウント B2B :外部のIdp(例えばAD等)とつなぎ、Auth0でフェデレーションし、ユーザ数を MAUでカウント B2E :社内利用を前提に、社員を認証、ユーザ数を ID数でカウント ▪ プラン Essential :単一アプリケーションの認証として利用したい( SSO不要なアプリケーション) Professional :IdpとしてAuth0を利用し、複数のアプリケーションで SSOも利用したい Enterprise :一定以上の可用性が求められが求められる、要求の高いアプリケーションで利用した  (ここからSLAが付きます!) ◦ Keycloak N/A ◦ Cognito ▪ セキュリティオプションの有無のみ https://docs.aws.amazon.com/ja_jp/cognito/latest/developerguide/cognito-user-pool-settings-advanced-security.html 「アダプティブMFA(端末変えたときに MFA出すとかの機能)」など、 Auth0のEnterprise以上の機能もついているようです。
  16. 比較 コスト https://aws.amazon.com/jp/cognito/pricing/ https://auth0.com/jp/pricing 初期移行が発生する場合は、基礎数値に依存しますが、新規立ち上げのサービスであれば 50,000MAUくらいを見ておけば、 1年以上戦えると 思っています。 サービス
 ※Auth0はB2Cを想定

    
 ユーザ数(MAU) 
 1ドル=109.86円 
 1,000
 10,000
 50,000
 100,000
 1,000,000
 10,000,000
 Cognito
 無料枠
 30,211
 485,032
 3,698,437
 Cognito
 (セキュリティ有効) 
 5,493
 54,930
 274,650
 466,905
 2,444,385
 17,275,485
 Auth0
 (Essential) 
 2,307
 25,049
 -
 -
 -
 -
 Auth0
 (Professional) 
 26,367
 164,796
 -
 -
 -
 -
 KeyCloak
 N/A
 ※個別見積もり 

  17. 比較 プラン Cross APP SSO (SSO有無だと理解しました(違ったらすいません)) Enterprise Connection (Gsuite・AD接続など) Organizasions

    (Auth0のClientアプリに対しての組織・権限管理ができるみたい です。 最近できた機能で、これは使ったことないです。。。) は、特にEnterprise領域では重要になってくると思います。 (完全に感覚値ですが・・・)運用を考えると、 Rules&Hooksが5 以上はほしいです。 • Essential 
 単一アプリケーションの認証として利用したい(SSO不要なアプリ ケーション) 
 • Professional 
 IdpとしてAuth0を利用し、複数のアプリケーションでSSOも利用し たい
 • Enterprise
 一定以上の可用性が求められが求められる、要求の高いアプリ ケーションで利用した(ここからSLAが付きます!) 
 • Auth0
  18. 比較 プラン 高度なセキュリティオプションをつけるか 否かで、料金が10倍変わりそうだったの で内容を見てみました。 ※お金がかかるので、動かしていませ ん。。。 • Cognito 流出したIDの場合ブロックしてくれそう

    適用するクライアントを選択可能 いつもと違う PCからログインした場合に、 MFAを 求めるなど、認証リスク発生時のアクションを選択 できるようです。 認証リスク発生時の通知設定のようです IPaddress単位でのホワイト・ブラックリストを管理 できるようです
  19. 各種開発ドキュメント • auth0 ◦ 公式ドキュメント https://auth0.com/docs ◦ 公式SDK各種 https://github.com/auth0 •

    Keycloak ◦ 公式ドキュメント https://www.keycloak.org/documentation https://github.com/keycloak/keycloak-documentation ◦ デベロッパーガイド https://keycloak-documentation.openstandia.jp/10.0.0/ja_JP/server_development/index.html ◦ 公式SDK各種 https://github.com/keycloak • Cognito ◦ 公式ドキュメント https://docs.aws.amazon.com/cognito/ ◦ amplify公式の認証ドキュメント https://docs.amplify.aws/lib/auth/getting-started/q/platform/js ◦ amplifyのgithub https://github.com/aws-amplify
  20. • Auth0 本日時間の関係で紹介しきれていませんが、機能・認証の柔軟性は最も高いと思いました。 認証構築する場合、機能面で選択肢に挙げない理由がないと思います。 • Keycloak Web上の情報量も多く、必要十分な機能を備えている為、認証構築の有力な選択肢だと思います。 Auth0との比較は開発・維持管理のコストの考え方、 Auth0にしか無い機能を利用したいか、否かで判断すると良さそうです。 •

    Cognito Amplifyとセットで使うことを前提に選定するプロダクトだと思いました。 単体のIDaaSとして使うのは少々難しいかもしれません。 • Other 今回、時間の制約で試せていませんか、他にも選択肢はあるので、システムの要件・特性・想定するユーザ増加率も加味したコ ストも確認した上で、選定されると良いと思います。 IDaaSであれば、OneLogin/Okta/Authlete managedであれば、Firebase OSSは、、、KeyCloakしか無いかもしれないですね 所感