認証プラットフォーム「auth0」とは？導入方法や機能・価格など分かりやすく解説！
- 投稿日:2022.12.19 最終更新日:2022.12.19
- JavaScript実践
- サンプルコード, チュートリアル, 経験者向け
この記事では、現在もっとも先進的なユーザ認証プラットフォームとして広く普及している「auth0」（オースゼロと読む）についてその概要や機能を分かりやすく解説したい。
SNSやオンラインバンキングなど一般的なウェブ上のサービスを使用するには、ユーザとして登録してログインをすることが必要になる。ユーザ認証とはこれらの一連のプロセスを指し、意識をせずともほとんどの人がユーザとしてそれらの機能は使用している。
ウェブやモバイルのアプリケーション開発者にとっては、ユーザ認証はアプリの根幹をなす大事な仕組みだ。バックエンドやインフラエンジニアでなくても理解しておきたい。
auth0はユーザ認証をもっともシンプルな形で実装するためのサービスであり、多くの大企業が自社のプロドクトに導入している。
auth0とは？
auth0はクラウド型の認証プラットフォームで、自社で実装すると手間の掛かる、ユーザのログイン情報やトークンの管理をなどを簡単におこなうためのサービスである。
世界的に広く普及しており、特にウェブやアプリの開発においては頻繁に使用される。
認証プラットフォームとしてはauth0の他にOktaが有名がある。なお、auth0社はOkta社によって買収されているがauth0とOktaは現在でも異なる認証プラットフォームである。
なお、auth0は日本語では「オースゼロ」といった具合に発音される。
auth0のおもな機能
auth0は簡単にアプリに実装することが出来るが、その一方でユーザ認証にまつわる様々な機能をあらかじめ備えている。
- シングルサインオン
- 多段階認証（MFA）
- ユニバーサルディレクトリ
- APIアクセス管理
- ワークフロー
シングルサインオン
auth0のもっとも大きなセールスポイントは「シングルサインオン」を備えている点だ。
シングルサインを有効にした場合、ひとつのアプリにログインすれば自動的にアクセスが許可されている関連アプリにログインされることになる。ユーザはログイン情報を複数のアプリに何度も入力するという煩わしさから解放される。
多段階認証
また、auth0は「多段階認証」（MFA）をサポートしている。
二段階認証は現在では、バンキングアプリやSNSなどにおいて標準的な機能となっているので説明する必要は無いかと思うが、Eメールやパスワードに加え、携帯電話に送信したワンタイムパスワードなどを入力させることによってアカウントのセキュリティを強化する仕組みだ。
auth0ではWebAuthn（FIDO）の他にEメールや認証コードを使用した認証を簡単に設定することができる。
auth0の仕組み
次にauth0がどのようにユーザ認証をおこなっているか確認したい。
次の図はauth0の最大の特徴であるシングルサインオン（SSO）の仕組みを表している。
ユーザがサイトにアクセスしてまだログインされていないと判断された場合は、ユーザはauth0のログイン画面に自動または手動で飛ばされる。ユーザがログインをおこなうとユーザ情報はブラウザのローカルストレージなどに保存される。
サインオングループ内の他のサイトにユーザがアクセスした場合は、ユーザはログインをせずともホーム画面に転送される。
OAuth 2.0とは？OpenIDとは？
OAuth 2.0はIETFによって定められている認証スタンダードであり、auth0はこのOAuth 2.0の仕様に沿って開発されている。
なお、OpenID Connect (OIDC)という規格もあるが、こちらは既に保持しているFacebookなどのユーザアカウントを使ってサードパーティー製のアプリにログインするために定められた規格である。
認証スタンダード「OAuth 2.0」について知りたい人はこちらの記事を読んでほしい。
Json Web Tokenについて知りたい人はこちらの記事をどうぞ。
auth0の管理画面
auth0には以下のような管理画面が用意されており、ユーザ管理を始めとする様々な設定をこの画面からおこなうことができる。
auth0の料金プラン
auth0にはfree・essentials・professional・enterpriseの4つの料金体系がある。
フリーであっても7000アクティブユーザまでは無料で使えるので、試しに使ってみるだけであればこれでも充分だろう。
auth0料金プラン: https://auth0.com/de/pricing
auth0を使った実装例
auth0を使ったログイン画面の実装例を見てみよう。
ここでは例としてAngularアプリにログイン画面を実装するパターンを紹介する。
SDKライブラリをインストールする
auth0ではJavaScriptを始めとする様々な言語のフレームワークに対応したSDKが用意されている。
また、フレームワークごとに導入のための手順がドキュメントとしてまとめられているので、それらを参考にして導入をおこなう。
npmを使用してauth0をインストールするには以下のコマンドを使用する。
npm install @auth0/auth0-angularドメイン名とクライアントIDを設定する
Angularアプリでauth0を使用する場合は、NgModuleにてドメイン名とクライアントIDを設定する。
auth0をAngularアプリで使用するための事前設定は以下で完了だ。
ログイン画面を設置する
auth0ではログイン画面はあらかじめ用意されており、関数を呼び出せばすぐに使用することができる。
まずはauth0をコンポーネント内で使用するためにAuthServiceを読み込む。
constructor(public auth: AuthService) {}次にボタンクリックなどの際にログイン関数を呼び出すようにする。
ログイン画面をポップアップで呼び出したい場合はloginWithPopup関数を、リダイレクトで呼び出したい場合はloginWithRedirect関数を使用する。
public login(): void {
this.auth.loginWithPopup();
}アプリを起動してログイン関数を呼び出すと以下のようなログイン画面が表示される。
フロントエンド側の基本的な実装はこれで完了だ。