本日はShopifyが提供するMultipass APIを理解するため情報をまとめました。

すでに会員管理システムをもつオーナーさんからするとShopoify用（自社EC用）のIDとパスワードを別にもつことはユーザー体験的にもいけてないし管理も煩雑になってしまいます。

これを解決してくれるのがMultipass APIです。概念図はこんな感じです。

Multipass 前

Multipass 後

では、具体的にどのようによう活用するか見ていきましょう。

初期設定

チェックアウトページへ移動します
/admin/settings/checkout

ここで、「アカウントを任意とする」または「アカウントを必要とする」を選択します。

Shopify Plusを契約しているアカウント限定ですが、下記のように Multipassを有効かするボタンがあります。ここでシークレットコードを取得します。

ユーザー情報(JSON)の準備

既存会員DBより下記のようなデータを用意します。

  {
    email: "bob@shopify.com",
    created_at: "2013-04-11T15:16:23-04:00",
  }

created_at にはこのjsonデータを生成した時間をいれます。

ここで生成できるデータタイプはこちらを参照ください。
https://shopify.dev/docs/admin-api/rest/reference/plus/user

メールアドレスをキーとしない場合はidentifierは必須となりますので指定してください。

JSONの暗号化、署名、Base64化

本家資料ではRubyとPHPでのサンプルがありますが、C#だとすでにライブラリーがあり、このあたりの処理をすべて自動で行ってくれます。

利用したライブラリーは下記です。
https://github.com/uoc1691/ShopifyMultipassTokenGenerator

下記が実際に使ったコードです

Controller


using System;
using System.IO;
using System.Security.Cryptography;
using Microsoft.AspNetCore.Mvc;
using Newtonsoft.Json;

namespace WarehouseApplication.Controllers
{
    public class MpController : Controller
    {
        public IActionResult Index()
        {
            return View();
        }

        /// <summary>
        /// The customer information is represented as a hash which must contain at least the email address of the customer 
        /// and a current timestamp (in ISO8601 encoding). 
        /// </summary>
        public class UserInformation
        {
            public string email { get; set; }
            public string first_name { get; set; }
            public string last_name { get; set; }
            public string created_at { get; set; }

            public UserInformation()
            {
                this.created_at = DateTime.Now.ToString("yyyy-MM-ddTHH\\:mm\\:sszzz");
            }
        }
        public IActionResult CreateToken(string email, string firstName, string LastName)
        {
            if (string.IsNullOrEmpty(email))
            {
                return View();
            }

            var user = new UserInformation()
            {
                email = email,
                first_name = firstName,
                last_name = LastName
            };

            // Serialize the customer data to JSON and encrypt it
            ViewData["Token"] = Hash256It(JsonConvert.SerializeObject(user));

            return View();
        }

        public string Hash256It(string userInformationJsonString)
        {
            // To generate a valid multipass login token, you need the secret given to you in your Shopify admin. 
            string shopifyMpKey = "YOUR SECRET KEY HERE";

            var sp = new ShopifyMultipassTokenGenerator.ShopifyMultipass(shopifyMpKey, "gyrocanopy-delivery-motor.myshopify.com");

            var token = sp.Process(userInformationJsonString);

            return token;
        }
    }
}

View


@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>CreateToken</title>
</head>
<body>

    <form action="/Mp/CreateToken" method="post">
        @Html.TextBox("email")
        @Html.TextBox("firstName")
        @Html.TextBox("lastName")
        <button class="" type="submit">
            Generate Token
        </button>
    </form>
    <div>
        @ViewData["Token"]
    </div>
</body>
</html>

Shopへリダイレクト

上記のコードを生成するとShopへのURLが表示されます。そのURLをブラウザー上にコピペすると動作を確認することができます。

下記のURLが生成されました

https://gyrocanopy-delivery-motor.myshopify.com/account/login/multipass/Iy9IuNpCaUBng3ZEYdKAEV7o4Q2zd6zrdl60zW9Xmizkbz6cshZ6aQVxPRJFRrXp76uY4C7WRPWpPjNq0K8BNQwRYajcxbjbY1svgqSN9nLdETsFqUJM6wVnwB30oJk-gKIrIOAtuev5Vqq0FfAUfi0hpSGRhJyyP3AX7ihQUTuGpeSbTWQvXAIRIkFHOnxjAtdN9Cgv1r3dgReMFpy1cIOVKuJ08nn4qFw_KZRnqQg=

このURLをブラザーにそのままコピペしてみます。そうすると、同じメールアドレスをもったユーザーのアカウントに遷移することができました。

参照

本家資料はこちらを参照ください。
https://shopify.dev/docs/admin-api/rest/reference/plus/multipass

[Shopify] の Multipass APIを理解する