Auth0でManagement APIを使ってみた

# はじめに

この記事は、Auth0のアカウント作成、アプリケーション作成(Next.js)、Management APIをcurlコマンドで実行するところまでを行なった際の備忘録です。Auth0・Management APIを初めて触る方に参考になればと思います！

# Auth0とは？

誰でも簡単に導入できる認証・認可のプラットフォームです。
自分で作ったWebアプリケーションなどに組み込むことで簡単にユーザー認証やトークン管理を実装することができます。
自分の実装したいものに合わせて機能をカスタマイズすることも可能です。例えば、ログイン方法では、ユーザー名/パスワードでのログインの他、ソーシャルアカウント（Google ,Facebook ,Twitterなど）を使用するように設定することができます。

[Auth0 Overview](https://auth0.com/docs/get-started/auth0-overview)

# Auth0触ってみる

Auth0のアカウント作成とアプリケーション作成(Next.js)を行います。今回はAuth0提供のサンプルアプリを使用します。

## 無料アカウント作成

1. [公式サイト](https://auth0.com/jp?utm_content=japanjpbrandauth0-generic-&utm_source=google&utm_campaign=apac_japan_jpn_all_ciam-all_dg-ao_auth0_search_google_text_kw_utm2&utm_medium=cpc&utm_id=aNK4z0000004IZLGA2&utm_term=auth0-c&gad=1&gclid=CjwKCAjw-b-kBhB-EiwA4fvKrAGv5It9ON4RdrUcKftVybPw4gyQYNQRVIMS7sO3cC1TPujhVxFu7xoCWEIQAvD_BwE)から無料トライアルを選択し、アカウントを登録する
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3476797/fdeebcac-9831-45d3-4d59-e8fdc9521c15.png)

1. 個人を選択
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3476797/54ea49b3-71e8-abdc-ae9b-0a01eb20840d.png)
I need advanced settingsは

    - テナントのドメイン名の変更
    - データを保存するリージョンの変更

    を行いたい場合は選択してください。
![スクリーンショット 2023-06-19 19.01.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3476797/0c28d59f-d23f-146b-c6a3-5bd6639a9cab.png)
チェックを入れていない場合、ドメイン名は任意のもの・リージョンはアメリカで設定されます。

    ＊テナントは後から追加できますが、ここで設定したドメイン名とリージョンは後から変更できないので注意！

1. ダッシュボードが表示されればアカウント作成完了！
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3476797/fa46fe47-bce3-8cf4-d273-56dbf71f01cf.png)

## アプリケーションの作成

1. Getting StartedからCreate Applicationを選択
    ![スクリーンショット 2023-06-20 15.53.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3476797/0342be74-463c-d89c-a71d-7f6ee98467f7.png)

1. アプリケーションの名前とタイプを選択

    今回はNext.jsで作成するので「Regular Web Applications」を選択します。
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3476797/2a4c36ad-b896-5f2e-15b5-71e68aaee052.png)
    
1. アプリケーションの開発言語をNext.jsで選択
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3476797/cb0d6b3e-8ee7-021f-de54-2ceac108e62f.png)

1. My Appが作成されたので、サンプルコードをダウンロード（GitHubからクローンすることも可能）
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3476797/faef83d8-3f2a-c12f-0a48-63ec8c4fe308.png)

    ＊自分のNext.jsのアプリと統合したい場合は、以降は[こちらの公式ドキュメント](https://auth0.com/docs/quickstart/webapp/nextjs/01-login)を参照してください！

    サンプルコードではSettingタブ > Basic Information > Domain/Client ID/Client Secretの値が`.env.local`に反映されていますが、自分のアプリと統合する場合にはこれらの値をコード内に埋め込む必要があります。
    ![スクリーンショット 2023-06-20 16.25.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3476797/28020935-e231-e486-b904-b7d473ad902d.png)
    ```.env.local
    AUTH0_SECRET=replace-with-your-own-secret-generated-with-openssl
    AUTH0_BASE_URL=http://localhost:3000
    AUTH0_ISSUER_BASE_URL='${Domain}'
    AUTH0_CLIENT_ID='${Client ID}'
    AUTH0_CLIENT_SECRET='${Client Secret}'
    AUTH0_AUDIENCE=
    AUTH0_SCOPE='openid profile'
    ```

1. Settingsタブ > Application URIs > Allowed Callback URLs/Allowed Logout URLsを画像のように設定し、ページ最下部の「Save Changes」を押す
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3476797/e5874114-3d35-238b-12fb-45d9d1fb720f.png)
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3476797/5e11ff86-bcc6-8f7d-362b-aa5565a205ab.png)

## アプリケーションの起動

1. ターミナルでダウンロードしたサンプルコード内に移動し、以下コードでアプリケーションを起動

    ```
    $ npm install && npm run dev
    ```

1. [http://localhost:3000/](http://localhost:3000/)にアクセスすると、Next.jsの初期画面とログインボタンが確認できました！
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3476797/d287fd14-ade6-1f50-5570-7fa83bfbce15.png)

    「Log in」ボタンでダイアログも表示されます
    ![スクリーンショット 2023-06-20 16.52.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3476797/ebce55ad-5d84-ee95-dd64-7fea42c4e40d.png)


# API触ってみる
手元でアプリケーションを起動することができたので、APIを触っていこうと思います。

Auth0のAPIは２種類あります。簡単に整理すると、こんな感じです。

Authentication API|Management API
---|---
ユーザー単位の認証周りの管理|Auth0全体の管理

[Auth0 APIの公式ドキュメント](https://auth0.com/docs/api)

今回はManagement APIをcurlコマンドで実行していこうと思います。

[Management APIの公式ドキュメント](https://auth0.com/docs/api/management/v2)

## 事前準備

Management APIを使用するためには

- Auth0のドメイン
- アクセストークン

が必須となるため、この二つをメモしておきます。

1. Auth0のコンソールにアクセスし、Applications > APIs > Auth0 Management APIを選択
    ![スクリーンショット 2023-06-20 20.03.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3476797/1e020254-fe8b-1a8c-87cb-c12cd52e479e.png)

1. Settings > General Settings > identifierをメモ
    ![スクリーンショット 2023-06-20 20.05.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3476797/ffc633de-0fe1-f887-f1b4-8f5f9f3cf9dc.png)
    この値が`https://${Auth0のドメイン}/api/v2`となります。

1. API Explorerタブを開いて「Create & Authrize Test Application」ボタンを押し、Tokenの値をメモ
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3476797/60fed2cb-def8-d734-8d6f-c1e90626489f.png)
    ![スクリーンショット 2023-06-20 20.16.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3476797/c693eafd-36b2-5e46-49f7-d8a2470f21a8.png)

    この値が`${アクセストークン}`となります。

## ユーザーを作成

事前準備が完了したので、[Create a User API](https://auth0.com/docs/api/management/v2#!/Users/post_users)を使用してユーザーを作成してみます。

試しに以下のコードをターミナルで叩きます。

```
curl --request POST \
  --url https://${Auth0のドメイン}/api/v2/users \
  --header 'authorization: Bearer ${アクセストークン}' \
  --header 'Content-Type: application/json' \
  --data '{
    "email": "john.doe@gmail.com",
    "blocked": false,
    "email_verified": true,
    "user_id": "abc",
    "connection": "Username-Password-Authentication",
    "password": "Password123456"
  }'
```

Auth０のコンソールのUser Management > Usersから実行結果を確認します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3476797/835771a6-2ad6-1a60-333d-6392a313413d.png)

ユーザーが作成されました！

それではこのユーザーでログインをしてみたいと思います。
手元で起動しているアプリケーションにアクセスし、先ほど作成したメールアドレスとパスワードを入力してみます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3476797/374215c3-00a9-c617-1dd0-8d43e526af6d.png)

「Accept」ボタンをタップ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3476797/39c7874e-a305-9efb-d609-420eb45bd826.png)

ログインすることができました！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3476797/c1b75b07-3e36-c43c-1871-4de051abc285.png)

今回はユーザーの作成を行いましたが、エンドポイントとパラメータを変更すれば、他にもさまざまなAPIを試すことができます！


# まとめ

Auth０にはここでは紹介しきれなかった機能やAPIがまだまだあるので、この記事をきっかけにしていろいろ試していただけたら幸いです。最後までお付き合い頂きありがとうございました！