Auth0をはじめる最初の一歩！Angular + Auth0のサンプルアプリケーションを動かしてみる

どうも！大阪オフィスの西村祐二です。

サイトを作るときにログイン機能をつけることは結構あると思います。実際に実装していこうとなるとかなり手間がかかったりして、労力がかかるところです。そこをサポートしてくれるサービスのAuth0にふれる機会がありました。

個人的によく使うAngularを使ったサンプルアプリケーションがAuth0より提供されていましたので、それを触ってみました。

これから触っていきたい、どんなことができるのか調査していきたいという方のはじめの一歩となれば幸いです。

Auth0とは？

クラウド型の認証基盤サービスとなります。

AWSでいうCognitoと似たサービスをイメージするとわかりやすいかもしれません。

公式サイトは下記になります。

https://auth0.com/

サンプルアプリケーションを試してみる

環境

Angular CLI: 7.3.4
Node: 10.15.1
OS: darwin x64
Angular: 5.2.11

Auth0でアプリケーションを作成

▼Auth0のポータルサイトよりアプリケーションを作成します。

▼今回、Nameは「My App」としています。適宜変更してください。次に、Single Page Web Applicationsを選択して「CREATE」ボタンをクリックします。

▼Auth0上でアプリケーションが作成され、Client IDなど各種設定情報などが確認できます。 今回、Quick Startのタブから「Angular2+」をクリックして初めていきます。

▼「DOWNLOAD SAMPLE」をクリックして、Angularのサンプルアプリケーションをダウンロードします。このサンプルアプリケーションには上記で作成したアプリケーションのClient IDやドメイン,Callback URLなどが設定された形でダウンロードされます。

▼だた、コールバックURLは作成したアプリケーションで設定されていないので、ポータルサイトから設定します。Settingsタブから「http://localhost:3000/callback」と設定してください。

サンプルアプリケーションを動かす

▼まず、サンプルアプリケーションの設定が前項で作成したアプリケーションの設定と一致しているか確認してください。

設定ファイルは「src/app/auth/auth0-variables.ts」に記載されています。

もし、違っていた場合は修正してください。

▼ダウンロードしたサンプルアプリケーションがあるディレクトリで下記コマンドを実行するとサンプルアプリケーションが起動します。

CLIが未インストールのとき実行
$ npm install -g @angular/cli

サンプルアプリケーション内に移動
$ cd 01-login 2

必要なパッケージをインストール
$ npm install

サンプルアプリケーションを起動
$ npm start

▼問題なく起動したら、「http://localhost:3000/」にブラウザからアクセスすると下記のようなサイトが表示されるかと思います。

▼「Log In」をクリックすると下記のようなUIが表示されます。はじめからGoogleのアカウントでログインできるようなソーシャルログインの機能を試すことができます。

▼今回はGoogleログインを試してみます。クリックすると下記画面が表示されるのでGoolgeアカウントとの紐づけを許可してあげます。

▼そうすると、自動的にリダイレクトされてログインした画面になります。

ユーザ情報の確認

サンプルアプリケーションより登録したユーザ情報を確認してみます。

▼「Users」タブから登録されているユーザを確認することができます。

▼プライマリーIDプロバイダ名などユーザの詳細を確認することができます。

▼ユーザのログも特に設定なく確認することができます。

▼ユーザ情報をJSONで表示することもできます。

さいごに

Auth0で提供されているAngularのサンプルアプリケーションを動かしてみました。

触ってみた感想としては、高機能かつ設定も簡単という印象をもちましたので、これから積極的に使っていきたいと思います。

今回はとりあえず、サンプルを動かしたという内容でしたが、次回は実践的なことや、中身にも触れていきたいと思います。

誰かの参考になれば幸いです。

Auth0についてのお問い合わせはこちら

Auth0にご興味がありましたら、ぜひクラスメソッドへお問い合わせください！

お問い合わせはこちら