Salesforce B2C Commerce でOAuthを利用してGoogle Calendar API呼んでみた

※ これから記載する事項は、私が所属する会社とは一切関係のない事柄です。

この記事ではB2C CommerceのOAuth2 プロバイダーを利用してGoogle Calendar APIを呼んでみたので、その実装方法を紹介します。

完成形

• カレンダーに「テスト　イベント」というイベントを作成。
  

• ブラウザで/Oauth-Sample に遷移し、Googleの同意画面に同意すると、下記のようなGoogle Calendar APIのレスポンスが表示される。
  

手順概要

1. Google Cloud Platform Console に必要な情報を登録し、クライアントID/シークレットを取得する。
2. B2C Commerce Business ManagerからOAuth2 プロバイダーを登録する。
3. B2C Commerce Business Managerからサービスを登録する。
4. カートリッジの作成

手順詳細

1. Google Cloud Platform Console に必要な情報を登録し、クライアントID/シークレットを取得する。

• Google Cloud Platform Console にログインし、任意のプロジェクトを選択する。（なければ作成）

• APIとサービス > 認証情報　に遷移し、「+認証情報の作成」ボタンから、「OAuth 2.0 クライアント ID」を作成。

• アプリーケーションの種類は「ウェブアプリケーション」を選択。

• 任意の名前と、承認済みのリダイレクトURLに「/Oauth-SampleRedirect」に遷移するURLを追加。

• 「作成」ボタンをクリック。

• APIとサービス > 認証情報　の一覧から作成した認証情報をクリックすると下記のような詳細画面になっており、「JSONをダウンロード」をクリックすれば、クライアントID/シークレットを含むクライアント情報が記載されたJSONファイルを取得できる。
  

• 今回はテストとして実行するので、APIとサービス > OAuth同意画面 に遷移し、ステータスは「テスト」にし、テストユーザーとして自身のGoogleアカウントを追加しました。
  

2. B2C Commerce Business ManagerからOAuth2 プロバイダーを登録する。

• Business Managerの 管理 > グローバル環境設定 > OAuth2 プロバイダー に遷移し、「新規」ボタンから新しくプロバイダーを作成する。
• 下記画像のように情報を入力していく。
  • ID　→　任意のID
  • 説明　→　任意
  • クライアントID　→　1.でダウンロードしたJSON内の”client_id”の値
  • クライアントシークレット　→　1.でダウンロードしたJSON内の”client_secret”の値
  • 範囲　→　OAuthのscope。今回はカレンダーを利用するので、https://www.googleapis.com/auth/calendar.events.readonly https://www.googleapis.com/auth/calendar.readonly (間は半角スペース)
  • 認証URL　→　1.でダウンロードしたJSON内の”auth_uri”の値
  • トークンURL　→　1.でダウンロードしたJSON内の“token_uri”の値
  • ユーザー情報URL　→　https://www.googleapis.com/oauth2/v1/userinfo?alt=json
  • ユーザー情報URLアクセストークン名　→　access_token
  • リダイレクトパイプライン　→　のちにカートリッジで実装するパイプライン。 Oauth-SampleRedirect
• 入力が終わったら「適用」ボタンで作成する。
  

3. B2C Commerce Business Managerからサービスを登録する。

• Business Managerの 管理 > オペレーション > サービス に遷移し「認証情報」タブを選択し、「新規」ボタンから新しくサービス認証情報を作成する。

• 下記画像のように入力したら、「適用する」ボタンをクリックし作成する。

  • 名前　→　任意の名前
  • URL　→　https://www.googleapis.com/calendar/v3
    

• Business Managerの 管理 > オペレーション > サービス に遷移し「サービス」タブを選択し、「新規」ボタンから新しくサービスを作成する。

• 下記画像のように入力したら、「適用する」ボタンをクリックし作成する。

  • 名前　→　任意の名前
  • 有効　→　チェック入れる
  • 認証情報　→　先ほど作成した認証情報の名前を選択
    

4. カートリッジの作成

• 下記のように/cartridge/controllers/Oauth.js と /cartridge/scrips/gcalAPIService.js　ファイルを含んだカートリッジを作成しデプロイする。（カートリッジの作成方法とデプロイ方法はこちらの記事を参照してください。）
  

※下記ソースコードは見やすさを考慮して最小限のコードにとどめてありますので、実際使う際は構造変更・エラーハンドリング・JS Docsの記載をした方がいいと思います。

• Oauth.js

"use strict";

var server = require("server");
var services = require("*/cartridge/scripts/gcalAPIService");
var oauthLoginFlowMgr = require("dw/customer/oauth/OAuthLoginFlowMgr");

server.get("Sample", function (req, res, next) {
    var result = oauthLoginFlowMgr.initiateOAuthLogin("{OAuthプロバーダーに設定した名前（今回はsample_gcal）}");
    if (!result) {
        res.render("/error", {
            message: "失敗しました",
        });
        return next();
    }
    res.redirect(result.location);
    next();
});

server.get("SampleRedirect", function (req, res, next) {
    var accessTokenResponse = oauthLoginFlowMgr.obtainAccessToken();
    var token = accessTokenResponse.accessToken;
    var event = services.getEvents(token, "{カレンダーのID（自分の場合はgoogleアカウントのEメールアドレスでした）}", "テストイベント")
    res.json(event);
    next();
});

module.exports = server.exports();

• gcalAPIService.js

"use strict";

var LocalServiceRegistry = require("dw/svc/LocalServiceRegistry");

function _createService() {
    return LocalServiceRegistry.createService("{サービスの名前に設定した値（今回はoauth.test）}", {
        createRequest: function (svc, _path, _token) {
            var url = svc.getURL() + _path;
            svc.setURL(url)
                .setRequestMethod("GET")
                .addHeader("authorization", "Bearer " + _token);
        },
        parseResponse: function (svc, response) {
            return JSON.parse(response.text);
        },
        filterLogMessage: function (msg) {
            return msg;
        },
    });
}

function getEvents(token, calID, querytext) {
    var service = _createService();
    var path = "/calendars/" + calID + "/events?q=" + querytext;
    var result = service.call(path, token);
    return result.object.items;
}

module.exports = {
    getEvents: getEvents,
};

コードの解説

• Oauth.js
  • OAuthを実装する場合は OAuthLoginFlowMgr を利用するといいようです。まず、oauthLoginFlowMgr.initiateOAuthLogin(OAuthProviderID)によってアプリケーションに認証を行い、成功した場合は、res.redirect(result.location)によってユーザに対してGoogleの同意画面へリダイレクトさせます。同意後はGoogle Cloud Platform Console で設定したURL（/Oauth-SampleRedirect）へコードとともにリダイレクトされます。
  • /Oauth-SampleRedirect に遷移されたら、oauthLoginFlowMgr.obtainAccessToken()が実行され、アクセストークンを取得し、そのトークを利用しCalendar APIを呼び、そのレスポンスをそのままブラウザに描写しています。