--- title: [Shopify] の Multipass APIを理解する tags: shopify multipass C# author: syantien slide: false --- 本日は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(); } /// /// 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). /// 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; } CreateToken
@Html.TextBox("email") @Html.TextBox("firstName") @Html.TextBox("lastName")
@ViewData["Token"]
``` # 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