NFTPLUS 認証画面
ログインフローは自前で実装することが可能です。JavaScript SDK
NFTPLUSで用意した共通画面を利用することができます。
Nuxt.jsの場合、以下のようなPluginを作成することで簡単に共通画面を利用できます。
import Cookies from 'universal-cookie'
import axios from 'axios'
import crypto from 'crypto'
let URLSearchParams
let atob
export default ({ app }, inject) => {
const cookies = new Cookies()
if (process.server) {
URLSearchParams = require('url').URLSearchParams
atob = base64 => new Buffer(base64, 'base64').toString('binary')
} else {
URLSearchParams = window.URLSearchParams
atob = base64 => window.atob(base64)
}
const auth = app.$env.auth
auth.state = () => {
const state = Math.floor(Math.random() * 100000)
cookies.set('mchplus_auth_state', state, { maxAge: 600 })
return state
}
auth.authorizeLink = lang => {
const params = new URLSearchParams()
params.append('response_type', 'code')
params.append('client_id', auth.clientId)
params.append('state', auth.state())
params.append('redirect_url', auth.redirectUri)
params.append('lang', lang)
params.append('scope', 'openid profile')
return auth.authUri + '?' + params.toString()
}
auth.phoneLink = lang => {
const params = new URLSearchParams()
params.append('lang', lang)
params.append('client_id', auth.clientId)
params.append('redirect_url', auth.phoneRedirectUri)
return auth.phoneUri + '?' + params.toString()
}
auth.OpenAuthWindow = lang => {
window.open(
auth.authorizeLink(lang),
'plsauth',
'resizable=no,width=400,height=600'
)
}
auth.OpenPhoneVerifyWindow = lang => {
window.open(
auth.phoneLink(lang),
'phoneauth',
'resizable=no,width=400,height=600'
)
}
auth.getToken = async params => {
if (cookies.get('mchplus_auth_state') != params.state) {
console.error('state error')
}
const data = new URLSearchParams()
data.append('grant_type', 'authorization_code')
data.append('code', params.code)
data.append('redirect_uri', auth.redirectUri)
data.append('client_id', auth.clientId)
data.append('client_secret', auth.clientSecret)
const ret = await axios.post(auth.tokenUri, data)
return ret.data
}
auth.HMAC_SHA256 = (key, data) => {
const hash = crypto
.createHmac('sha256', key)
.update(data)
.digest('base64')
const hashNoPadding = hash.replace(/={1,2}$/, '')
return hashNoPadding
}
auth.parseJwt = token => {
const base64Url = token.split('.')[1]
const base64 = base64Url.replace('-', '+').replace('_', '/')
return JSON.parse(atob(base64))
}
inject('mchplusAuth', auth)
}
ログイン前ページで、
this.$mchplusAuth.OpenAuthWindow("ja");
と呼び出すと子Windowで認証画面が開きます。
Last updated