2017.10.

31 Shopyfy学习[1]

Video
Creating a Shopify app in 5 minutes using Ruby on Rails on Vimeo

video: Creating a Shopify app in 5 minutes using Ruby on Rails on Vimeo

text: shopify_app/Quickstart.md at master · Shopify/shopify_app · GitHub\
开发者后台：Shopify Partner Program — Become the next Shopify Expert
店家后台：learning language with wenwen – Opening Soon

developers.shopify.com - Getting started

Getting started - Developer resources - Shopify Help Center
可以创建一个Development Stores
可以通过Developer Tools app来给自己的development store添加很多假数据
If you are subscribed to webhooks, they will be triggered every time data is added by the app.
提供给开发者支持的libraries有
* Shopify API gem
* Shopify applicaiton generator 一个完整rails
* Embedded App Example 一个embedded例子 用shopify_app这个gem做的
Featured APIs
Embbedded App SDK

Building a public Shopify application

Building an application - API tutorials - Shopify Help Center

How to Build Your First Shopify App

How to Build Your First Shopify App // Josh Brown - YouTube
./ngrok http 3000

在shopify partners的dashboard上创建一个josh_test_app项目
app_url: http://xxx.ngrok.io
redirect_url: http://xxx.ngrok.io/auth/shopify/callback

rails new josh_test_app

gem 'shopify_app'

bundle

bungle exec spring stop

rails g shopify_app --api_key xxx --secret xxx

 ​
rake db:migrate
rails s

这个时候就可以访问 xxx.ngrok.io

代码分析
schema

​
一个shops表单
* shopify_domain: "xxxx.myshopify.com" , 且对shopify_domain加了index
* shopify_token: "xxxxxxxxxxxxxxxx"
一个shop就相当于是一个使用该app的店家。
routes
mount ShpifyApp::Engine, at: '/'

这个Engine从来没了解过
查询了一下shopify_app的源码shopify_app/config/routes.rb这个routes.rb
 ShopifyApp::Engine.routes.draw do
controller :sessions do
get 'login' => :new, :as => :login
post 'login' => :create, :as => :authenticate
get 'auth/shopify/callback' => :callback
get 'logout' => :destroy, :as => :logout
end

namespace :webhooks do
post ':type' => :receive
end
end

config/initializers/shopify_app.rb 中的内容如下

​
这里就是我们在install generators时配置的内容，其中
scope: 就是该app向用户和shopify授权希望获得的授权范围，这里就是read_orders, read_products
看到scope，于是查阅了shoipfy的 Getting started/Authentication/OAuth 文档OAuth
https://{shop}.myshopify.com/admin/oauth/authorize?client_id={api_key}&scope=
{scopes}&redirect_uri={redirect_uri}&state={nonce}&grant_options[]={option}

用这个网址可以打开下面这个用户授权页面

​
redirect_url不仅要作为用户授权后的redirect网址，也会在用户点击后，返回授权成功前，与api_key一起作为验
证，且必须有的。
最后这个grant_options与api access modes有关
用户点击instll app授权成功会，就会被redirect到client app
https://example.org/some/redirect/uri?code=
{authorization_code}&hmac=da9d83c171400a41f8db91a950508985&timestamp=1409617544&state=
{nonce}&shop={hostname}

client要做的几件事：
* 确认state nonce与之前发出去的是一样的
* Ensure the provided mac is valid.
* Ensure the provided hostname is a valid hostname
检查完毕之后，就可以去与shopify服务器换取permanent access
POST https://{shop}.myshopify.com/admin/oauth/access_token

request body:
* client_id api_key
* client_secret secret_key
* code authorization code
服务器的response，有两种
offline access mode

{
"access_token": "f85632530bf277ec9ac6f649fc327f17",
"scope": "write_orders,read_customers"
}

online access mode

{
"access_token": "f85632530bf277ec9ac6f649fc327f17",
"scope": "write_orders,read_customers",
"expires_in": 86399,
"associated_user_scope": "write_orders",
"associated_user": {
"id": 902541635,
"first_name": "John",
"last_name": "Smith",
"email": "john@example.com",
"account_owner": true
}
}

以后之间取用数据就是 X-shopify-Access-Token: {access_token}

这里有shopify所有提供的scopes

Webhook
Getting started/Using webhooks
Webhook - Admin API - Shopify Help Center

0@Blog/技术博客/3@思维录像机/笔记版