Adobe IDによるOAuth認証 #AdobeIO

この投稿について

Adobe I/O デベロッパーブログを読んで頂き有り難うございます。今回はAdobe Creative Cloud APIを使用してAdobe StockやTypekitプラットフォームなどにアクセスする時に必要となるアクセストークンの取得方法を説明します。

コンテンツ

  • 概要
  • 始める前に
  • APIキーの指定
  • Adobe Creative SDKスクリプトの追加
  • Adobe Creative SDKの初期化
  • ユーザー承認後の処理
  • 次のステップ

概要

Adobe StockなどのAdobe Creative CloudのAPIを使用する前に、Adobe Creative SDKのAPIを使ってログインを行い、そのログインが承認された時に返されるアクセストークンを取得する必要があります。

Adobe Creative SDKはAdobe Creative Cloudプラットフォームを利用するためのSDKで、開発するアプリケーションにAdobe Creative Cloudを統合することができます。

Adobe Creative SDKは使用するデバイスに応じて以下の3種類があります:

  • Creative SDK for iOS
  • Creative SDK for Android
  • Creative SDK for Web

Adobe Creative SDKの詳細については別の機会に説明します。ここではAdobe Creative SDK for Webを使用して、Adobe Creative SDKのユーザー認証UIコンポーネントを表示し、ユーザーの承認後にアクセストークンを取得する方法を説明します。

サンプルコードはWeb: Getting Started Samples / User Auth UIからダウンロードできます。

始める前に

Adobe Creative SDKを使用する前に、開発するアプリケーションを登録して、APIキーの値を取得してください。 取得方法については「Adobe I/Oのアプリケーション開発を始める前に」をご覧ください。

以下の環境が必要です:

  • サポートされているブラウザ:Chrome 53+、Safari 9+、Firefox 45+、Edge、IE11 +
  • SSL:Adobe Creative SDKを使用するサイトでSSLをサポートする必要があります

今回作成するファイルは4つです:

  1. config.js:APIキーの指定
  2. index.html:Adobe Creative SDKスクリプトの追加
  3. index.js:Adobe Creative SDKの初期化、ログイン、ログアウト、アクセストークンの取得
  4. redirectims.html:ユーザー承認後の処理

config.js:APIキーの指定

Adobe I/Oコンソールで取得したアプリケーションのAPIキーを 定義します。

config.js

var CONFIG = {
    CSDK_CLIENT_ID: "<YOUR_API_KEY_HERE>"  // IO Consleで取得したAPIキーを指定
    }

index.html:Adobe Creative SDKスクリプトの追加

Adobe Creative SDK for Webでは、index.htmlにAdobe Creative SDKのスクリプトを追加すれば必要なリソースが読み込まれます。

index.html

<!DOCTYPE html>

<html>
<head>
    <title>CSDK Getting Started</title>
</head>
<body>

    <button id="csdk-login">Log into Creative Cloud</button>
    <button id="csdk-logout">Log out of Creative Cloud</button>

    <script type="text/javascript" src="https://cdn-creativesdk.adobe.io/v1/csdk.js"></script>
    <script type="text/javascript" src="config.js"></script>
    <script type="text/javascript" src="index.js"></script>
</body>
</html>

csdk.jsスクリプトは、Adobe Creative SDKの機能にアクセスできるAdobeCreativeSDKグローバルオブジェクトを作成します。csdk.jsスクリプトは、<body>の中、できれば</ body>タグの直前に配置して、ページの読み込みを遅延させないようにする必要があります。

index.js:Adobe Creative SDKの初期化、ログイン、ログアウト、アクセストークンの取得

index.jsファイルでAdobe Creative SDKの初期化をします。初期化では、Adobe I/Oコンソールで取得したAPIキーを使用してクライアントを認証します。

成功:WebコンソールでAdobe Creative SDKオブジェクトにアクセスできれば、初期化は成功です。
エラー:「Access-Control-Allow-Origin」が原因でXMLHttpRequestエラーが発生した場合は、SSLの設定に問題がある可能性があります。

さらにindex.jsには以下の機能が定義されています:

  • ユーザーがログインボタンを押したときにAdobe IDログインウィンドウ(ユーザー認証UIコンポーネント)を表示する(ログインしていない場合)
  • ログアウト

クリックのイベントハンドラーから、AdobeCreativeSDK.login()関数を実行してください。正しく実行しないと、ブラウザーがポップアップウィンドウをブロックしてしまいます。

サンプルコードはWeb: Getting Started Samples / User Auth UIにあります。

index.js

/* HTML buttonにhelperを登録します。 */
document.getElementById("csdk-login").addEventListener('click', handleCsdkLogin, false);
document.getElementById("csdk-logout").addEventListener('click', handleCsdkLogout, false);

/* ------------------------------------------ */

/* AdobeCreativeSDK オブジェクトの初期化 */

AdobeCreativeSDK.init({
     clientID: CONFIG.CSDK_CLIENT_ID, // condif.jsファイルでCONFIG_CSDK_CLINET_IDを定義、IO Consleで取得したAPIキーを指定
     onError: function(error) {
         /* エラー処理 */
         if (error.type === AdobeCreativeSDK.ErrorTypes.AUTHENTICATION) { 
             console.log('You must be logged in to use the Creative SDK');
         } else if (error.type === AdobeCreativeSDK.ErrorTypes.GLOBAL_CONFIGURATION) { 
             console.log('Please check your configuration');
         } else if (error.type === AdobeCreativeSDK.ErrorTypes.SERVER_ERROR) { 
             console.log('Oops, something went wrong');
         }
     }
});

/* ------------------------------------------ */

/* helper functionの作成 */

function handleCsdkLogin() {

    /* auth statusを取得 */
    AdobeCreativeSDK.getAuthStatus(function(csdkAuth) {

        if (csdkAuth.isAuthorized) { 
            console.log('Logged in!');
            console.log(csdkAuth);
            // アクセストークンはcsdkAuth.accessTokenに格納される
        } else {
            // Adobe Creative Cloudの承認のためのログインを実行
            AdobeCreativeSDK.login(handleCsdkLogin);
        }
    });
}

/* ------------------------------------------ */

/* helper function の作成 */
function handleCsdkLogout() {

   /* auth statusを取得 */
   AdobeCreativeSDK.getAuthStatus(function(csdkAuth) {

       if (csdkAuth.isAuthorized) {
           AdobeCreativeSDK.logout();
           console.log('Logged out!');
       } else {
           console.log('Not logged in!');
       }

    });
}

ログイン認証に成功すると、次のようなダイアログが表示されます。このダイアログは2回目以降の認証時には表示されません。

redirectims.html:ユーザー承認後の処理

ユーザー承認後の処理するために、redirectims.htmlという名前のHTMLファイルをサーバーに保存する必要があります。このファイルにAPIキーを指定し、csdk_auth.jsスクリプトを追加します。ファイルを作成後、そのファイルをWebアプリケーションのルートパスにアップロードしてください。例:https://mydomain.com/redirectims.html ファイル名は変更しないでください。

redirectims.html

<!DOCTYPE html>
<html>
<head></head>
<body>
    <script type="text/javascript">
        window.clientID = '<YOUR_API_KEY_HERE>'; // IO Consleで取得したAPIキーを指定
        window.scope = '';

    </script>
 
    <script type="text/javascript" src="https://cdn-creativesdk.adobe.io/v1/csdk_auth.js"></script>
</body>
</html>

redirectims.htmlファイルを保存する場所は、Adobe I/Oコンソールで指定します。

次のステップ

Adobe Creative SDKを使ってログインを行い、アクセストークンを取得することができました。これでAdobe Creative CloudのAPIを使用する準備が整いましたので、このアクセストークンを使ってAdobe Creative Cloudにアクセスしてみましょう。

関連リンク

デベロッパーブログ記事一覧

  1. デベロッパー向け技術情報を日本から発信します #AdobeIO
  2. Adobe I/Oのアプリケーション開発を始める前に #AdobeIO
  3. Adobe Stock API の紹介 #AdobeIO

本記事の内容は2018年3月現在の情報のものであり、今後変更される可能性があります。あらかじめご了承ください。

投稿者

Kuniko Nagayama

Yoshiaki Nagayasu

Comments are closed.