Auth0 SPA JS SDKの一般向け提供に関する告知

当社の新しいシングルページアプリケーション（SPA）用のJavaScript SDK、auth0-spa-jsのリリースを発表させていただきます。

SDKを刷新する理由

ここ数年、

auth0.js

ライブラリは当社のデフォルトのブラウザベースSDKとして、当社の製品および成功において重要な役割を担ってきました。週間ダウンロード数は10万以上を数え、Auth0をお使いのほぼすべてのお客様に様々な用途で使用されています。

その間に、当社ではコア製品向けに数々の機能を開発してきました。プラットフォームの進化に伴い、

auth0.js

のサイズと機能性も向上してきました。

auth0.js

は、多種多様な状況に対応できる極めて強力なSDKですが、その多機能性ゆえにかえって不便になっています。

当社では基本に立ち返り、開発者が実装する最も一般的なシナリオを考慮し、ウェブプラットフォームSDKはどのように機能すべきかを考え直しました。この新しいSDKには、以下の特徴があります。

• 当社が誇るログイン機能であるユニバーサルログインを統合
• シングルページアプリケーションへの統合がはるかに簡単になり、必要なコード数も減少
• 標準やプロトコルから開発者を解放
• グラントやその他のプロトコル詳細の指定、トークン有効期限と更新の管理、トークンの保存やキャッシュといった煩わしい作業から開発者を解放
• 業界およびサービスのベストプラクティスに従い、開発者をセキュリティの落とし穴から保護
• gzip圧縮により約7KBまで軽量化

当社では、これらの変更に自信を持っており、当社の顧客や開発者コミュニティが、この新しいSDKの使いやすさはもちろん、多機能かつ安全である点を体感していただけると信じています。

“SPAの安全を保つために、@auth0にauth0-spa-jsという新しいSDKが実装されました。ぜひチェックしてみてください！”

これをツイートする

auth0-spa-js

の使用推奨状況（および非推奨状況）

新しいSDKは、業界のベストプラクティスを活用し安全性を保つため、SPAで使用するよう設計されています。

OAuth2ワーキンググループは、シングルページアプリケーションからAPIを起動するためのOAuth2の使用方法に関する最新の一般向けベストプラクティスドキュメントを公開しました。今後は、従来のOAuth2仕様書に記載されたimplicit grantを使用するのではなく、Proof Key for Code Exchange（PKCE）による認可コード付与を使用することを推奨します。詳しくは、当社の開発主任Vittorio Bertocciのブログ記事をご覧ください。

この新しいJavaScript SDKでは、認証用にPKCEによる認可コード付与を実装しました。したがって、この新しいライブラリを使用することで、シングルページアプリケーションにおけるセキュリティに関する最新の業界ベストプラクティスに従うことになります。

auth0.js

のサポートは継続しますので、ご安心ください。引き続き埋込み型ログインを使用したり、managementAPI またはauthenticationAPIを呼び出す必要があったりする場合、

auth0.js

をそのままご使用ください。SPAでユニバーサルログインを使用する場合は、

auth0-spa-js

に切り替えることを推奨します。

Auth0 SPA JS SDKの使い方

新しいSDKを使い始めるにはどうすればよいでしょうか？一般的なJavaScript向けの手順をご紹介しますので、お客様のフレームワークに合わせて応用してください。

インストールする

新しいSDKを使用するには、最初にnpmからインストールします。

npm install @auth0/auth0-spa-js

あるいは、当社のCDNを使用してプロジェクトにインクルードすることもできます。

<script src="https://cdn.auth0.com/js/auth0-spa-js/1.0/auth0-spa-js.production.js"></script>
 

クライアントを作成する

auth0-spa-js

をプロジェクトに追加したら、アプリケーションでAuth0クライアントのインスタンスを作成する必要があります。1クライアント1インスタンスのみを作成するのが理想的です。この作業は、アプリケーションをレンダリングまたは初期化する前に実行してください。

async/awaitを使用する場合の記述：

//with async/await
const auth0 = await createAuth0Client({
  domain: '<AUTH0_DOMAIN>',
  client_id: '<AUTH0_CLIENT_ID>'
});

Promiseを使用する場合の記述：

//with promises
createAuth0Client({
  domain: '<AUTH0_DOMAIN>',
  client_id: '<AUTH0_CLIENT_ID>'
}).then(auth0 => {
  //...
});

ログインする

アプリケーションにログインする機能は、簡単に追加できます。次のボタンを設定します。

<button id="login">クリックしてログインする</button>

クリックハンドラを追加してから、

loginWithRedirect()

メソッドを呼び出します。

document.getElementById('login').addEventListener('click', () => {
  return auth0.loginWithRedirect();
});

Auth0による認証後、ユーザーがアプリにリダイレクトされたら、アプリ側で

handleRedirectCallback()

を呼び出す必要があります。

await auth0.handleRedirectCallback();

これにより、Auth0からの結果解析、トークンの保存、セッションの設定が実行されます。必要に応じて、ユーザーまたはトークンを取得できるようになります。

const user = await auth0.getUser();
const token = await auth0.getTokenSilently();

APIを呼び出す

SDKを使用してトークンを自動的に取得し、そのトークンをAPIへの呼び出しで使用することもできます。

次のボタンを設定します。

<button id="call-api">APIを呼び出す</button>

click handlerを追加し、

getTokenSilently()

を呼び出してから、返されたトークンをAPIコールで使用します。

async/awaitを使用する場合の記述：

//with async/await
document.getElementById('call-api').addEventListener('click', async () => {
  const accessToken = await auth0.getTokenSilently();
  const result = await fetch('https://myapi.com', {
    method: 'GET',
    headers: {
      Authorization: `Bearer ${accessToken}`
    }
  });
  const data = await result.json();
  console.log(data);
});

Promiseを使用する場合の記述：

//with promises
document.getElementById('call-api').addEventListener('click', () => {
  auth0
    .getTokenSilently()
    .then(accessToken =>
      fetch('https://myapi.com', {
        method: 'GET',
        headers: {
          Authorization: `Bearer ${accessToken}`
        }
      })
    )
    .then(result => result.json())
    .then(data => {
      console.log(data);
    });
});

有効なトークンが保存されている場合、

getTokenSilently

がそのトークンを返します。保存されていない場合は、引数として入力されたパラメータを使用して

/authorize

URLによりiframeが開かれ、トークンが返されます。

ログアウトする

最後に、アプリケーションからログアウトするには、event handlerをログアウトボタンに追加し、Auth0の

logout()

メソッドを呼び出します。

ボタンの記述：

<button id="logout">ログアウトする</button>

クリックハンドラと

logout()

への呼び出しの記述：

document.getElementById('logout').addEventListener('click', () => {
  auth0.logout();
});

SDKの中身

開発者の多くは（自分も含め）中身がわからないものに対して慎重になると思いますので、新しいSDKの背後にあるプロトコルについて簡単にご説明しましょう。

お客様が実装の細かい部分に頭を悩ませることがないように、新しいSDKではそのような詳細な部分をあえて全て抽象化しましたが、

auth0-spa-js

はOAuth 2.0仕様に準拠していると聞けば、アイデンティティギークな方々にも満足していただけると思います。

• loginWithRedirect

  は、PKCEによる認可コードを使用

• loginWithPopup

  は、PKCE +

  web_message

  による認可コードを使用

• getTokenSilently

  は、PKCE +

  web_message

  による認可コードを使用

Auth0は、当社のセキュリティに関するベストプラクティスへの取り組みを真摯に採用しています。煩わしい作業は当社がすべて引き受けましたので、お客様は安心してご使用ください。

今後の展望

auth0-spa-js

の使用に関する詳細は、Auth0シングルページアプリケーションSDK紹介ドキュメント、リポジトリ、SDKの取扱説明書を参照してください。また、ReactやAngularなどの一般的なフロントエンドフレームワーク向けに順を追って統合手順を解説するクイックスタートガイドもご用意しています。当社が自信を持ってお送りするこの新しいSDKを是非ご利用ください。そして、開発者コミュニティからのフィードバックをお待ちしております。