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は使用するデバイスに応じて以下の３種類があります:

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からダウンロードできます。

https://blogs.adobe.com/japan-conversations/files/2018/03/access-token.jpg

始める前に

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

以下の環境が必要です：

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

今回作成するファイルは４つです：

config.js：APIキーの指定
index.html：Adobe Creative SDKスクリプトの追加
index.js：Adobe Creative SDKの初期化、ログイン、ログアウト、アクセストークンの取得
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のスクリプトを追加すれば必要なリソースが読み込まれます。

The Story Begins Here by Risfan Fardiansyah

<!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回目以降の認証時には表示されません。

https://blogs.adobe.com/japan-conversations/files/2018/03/Screen-Shot-2018-03-01-at-20.15.56.png

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

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

The Story Begins Here by Risfan Fardiansyah

<!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コンソールで指定します。

https://blogs.adobe.com/japan-conversations/files/2018/03/redirectims.jpg

次のステップ

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