Help us understand the problem. What is going on with this article?

[Shopify] の Multipass APIを理解する

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

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

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

Multipass 前

image.png

Multipass 後

image.png

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

初期設定

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

image.png

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

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

image.png

参照

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした