Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

自分のアプリやWebサービスにAuth0で簡単にユーザ認証を追加する方法

More than 3 years have passed since last update.

認証サーバの役割

  • ユーザの登録・管理・ログイン・ログアウト
  • セキュアな認証

こういうのってガチで作ろうとしたらRFC読みながら、、、とか、かなり大変。
それにプログラムは書けば書くほどバグが生まれるので、、、何も書かずに済むのが一番です :smile:
そこでAuth0の出番です。

Auth0 とは

Auth0は認証サーバのWebサービス。
競合にはAWS Cognito User PoolやFirebaseなどがある。
正直AWS Cognito User Pool 使いたいすよね

デモ

とりあえず自分のREST-APIサーバへのアクセスに認証を入れてみる。
やりたいことをUMLで書くとこんな感じです。
スクリーンショット 2017-03-28 16.06.58.png

Auth0 ユーザ登録

https://manage.auth0.com/login

省略

Client を作成

Screenshot 2017-03-28_14-47-45.png (63.6 kB)

今作った Client の詳細を開く

Screenshot 2017-03-28_15-06-18.png (68.9 kB)
DomainClient IDClient Secret をメモ。
Postmanで作業を行っていきます。

Signup API で認証するユーザを作成

Screenshot 2017-03-28_15-12-19.png (51.6 kB)

value
client_id さっきメモしたやつ
email なんでもOK
password なんでもOK
connection Username-Password-Authentication

Username-Password-Authentication は ユーザ名とパスワードで認証する方式です。
このときのパスワードの長さとかバリデーションルールは
Connections→DatabaseのUsername-Password-Authentication
とかで色々変更できます。
ちなみにusername or email + password で認証できるようにすることも出来ます。

Login API でトークンを取得する

今作ったユーザでログイン+認証してみる。
Screenshot 2017-03-28_15-23-19.png (52.6 kB)

するとこんな感じのレスポンスが返ってくるはず。

スクリーンショット 2017-03-28 15.24.01.png (47.0 kB)

この id_token を自鯖のAPIにリクエストする際に利用する。
※含まれてるaccess_token は auth0 へアクセスするときのアクセストークンなので今回は使わない

自鯖APIを用意する

面倒なので webtask を利用します。
webtaskのユーザ登録する。

ちなみに登録画面とかのデザインが見覚えがありますね。
実はauth0は内部的にwebtaskを利用しているそうです。
競合はNowですかね。

ということで省略。

登録が終わると、こんな画面が出てくるはず。
Screenshot 2017-03-28_15-31-12.png (115.5 kB)

1, 2 を終わらせて、3は飛ばして、wt edit とコマンドを打つ。

するとブラウザが開いてこんな画面が表示されます。

スクリーンショット 2017-03-28 15.33.29.png (49.4 kB)

webtask を選択して名前はなんでもOKで作成する。

ソースコードに以下をコピペします。

"use latest";
module.exports = function(ctx, cb) {
  let result = 'fail';
  const jwt = require('jsonwebtoken@7.1.9');
  const secret = ctx.secrets.clientSecret;
  const authorization = ctx.headers.authorization || '';
  const tokens = authorization.split(' ');
  if (tokens[0] == 'Bearer') {
    const jwtToken = tokens[1];
    let decoded;
    try {
      const decoded = jwt.verify(jwtToken, secret);
      result = 'success';
    } catch(err) {
      console.log(err);
    }
  }
  cb(null, { result });
};

コードではjsonwebtokenの認証をして、成功したら success、失敗したら fail を返してます。
※ちなみに webtask で使える node modules はここで検索できる。

これだけでは動かないので、 結構前にメモした Client secret (ソースコード5行目)を渡すようにします。
1. tool ボタンから Secrets を選択。
スクリーンショット 2017-03-28 15.37.02.png (218.8 kB)

  1. clientSecret という名前で作成。
    スクリーンショット 2017-03-28 15.38.00.png (25.5 kB)

  2. Run ボタンを押して実行
    スクリーンショット 2017-03-28 15.40.47.png (12.1 kB)

  3. 一番下にURLが表示されてるのでコピー
    Screenshot 2017-03-28_15-42-31.png (13.3 kB)

  4. postman で トークンを渡してAPIアクセスしてみる

value
Authorization Bearer さっきのid_token

Bearer と id_token の間は半角スペースで空けること。

スクリーンショット 2017-03-28 15.46.38.png (109.4 kB)

トークンの検証が成功したことがわかる。

まとめ

もう一度貼る
スクリーンショット 2017-03-28 16.06.58.png

auth0を使い、webtask で実装したようなことを自鯖でアクセス時に毎回通過させるようにすれば、
ユーザ認証が簡単にできるようになる。他にも提供している機能として、Get User Info や、Get Token Infoを利用してユーザの情報をauth0に問い合わせて、取得出来たりもします。

※実際にはverify-access-token に書いてありますが、デコードした中身を検証する必要があります。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away