[Shopify] の Multipass APIを理解する

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

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

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

## Multipass 前
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/241909/d5b031f8-4b03-57b0-d6d9-6362c69f578e.png)


## Multipass 後

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/241909/08617ab8-60a5-4ca1-4e3d-7d3886e3b62c.png)

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

# 初期設定

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/241909/4c4ede80-4701-dd0b-c658-c91514f0c333.png)

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


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


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

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

```json
  {
    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

```csharp

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

```html

@{
    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をブラザーにそのままコピペしてみます。そうすると、同じメールアドレスをもったユーザーのアカウントに遷移することができました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/241909/c8a00353-7990-fe37-4120-4202e4da693e.png)

# 参照

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