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で認証画面が開きます。