MCH+ Document
検索…
MCH+認証画面
ログインフローは自前で実装することが可能です。JavaScript SDK
MCH+で用意した共通画面を利用することができます。
Nuxt.jsの場合、以下のようなPluginを作成することで簡単に共通画面を利用できます。
mchauth.js
1
import Cookies from 'universal-cookie'
2
import axios from 'axios'
3
import crypto from 'crypto'
4
5
let URLSearchParams
6
let atob
7
export default ({ app }, inject) => {
8
const cookies = new Cookies()
9
if (process.server) {
10
URLSearchParams = require('url').URLSearchParams
11
atob = base64 => new Buffer(base64, 'base64').toString('binary')
12
} else {
13
URLSearchParams = window.URLSearchParams
14
atob = base64 => window.atob(base64)
15
}
16
17
const auth = app.$env.auth
18
auth.state = () => {
19
const state = Math.floor(Math.random() * 100000)
20
cookies.set('mchplus_auth_state', state, { maxAge: 600 })
21
return state
22
}
23
24
auth.authorizeLink = lang => {
25
const params = new URLSearchParams()
26
params.append('response_type', 'code')
27
params.append('client_id', auth.clientId)
28
params.append('state', auth.state())
29
params.append('redirect_url', auth.redirectUri)
30
params.append('lang', lang)
31
params.append('scope', 'openid profile')
32
return auth.authUri + '?' + params.toString()
33
}
34
35
auth.phoneLink = lang => {
36
const params = new URLSearchParams()
37
params.append('lang', lang)
38
params.append('client_id', auth.clientId)
39
params.append('redirect_url', auth.phoneRedirectUri)
40
return auth.phoneUri + '?' + params.toString()
41
}
42
43
auth.OpenAuthWindow = lang => {
44
window.open(
45
auth.authorizeLink(lang),
46
'plsauth',
47
'resizable=no,width=400,height=600'
48
)
49
}
50
51
auth.OpenPhoneVerifyWindow = lang => {
52
window.open(
53
auth.phoneLink(lang),
54
'phoneauth',
55
'resizable=no,width=400,height=600'
56
)
57
}
58
59
auth.getToken = async params => {
60
if (cookies.get('mchplus_auth_state') != params.state) {
61
console.error('state error')
62
}
63
const data = new URLSearchParams()
64
data.append('grant_type', 'authorization_code')
65
data.append('code', params.code)
66
data.append('redirect_uri', auth.redirectUri)
67
data.append('client_id', auth.clientId)
68
data.append('client_secret', auth.clientSecret)
69
const ret = await axios.post(auth.tokenUri, data)
70
return ret.data
71
}
72
73
auth.HMAC_SHA256 = (key, data) => {
74
const hash = crypto
75
.createHmac('sha256', key)
76
.update(data)
77
.digest('base64')
78
const hashNoPadding = hash.replace(/={1,2}$/, '')
79
return hashNoPadding
80
}
81
82
auth.parseJwt = token => {
83
const base64Url = token.split('.')[1]
84
const base64 = base64Url.replace('-', '+').replace('_', '/')
85
return JSON.parse(atob(base64))
86
}
87
88
inject('mchplusAuth', auth)
89
}
90
Copied!
ログイン前ページで、
1
this.$mchplusAuth.OpenAuthWindow("ja");
Copied!
と呼び出すと子Windowで認証画面が開きます。
最終更新 1yr ago
リンクのコピー