feat(support logout and change OAuth API): add logout API and change the way of getting OAuth Code

Littleor · Littleor · commit 38831b4dbed1 · 2022-03-22T23:45:08.000+08:00
diff --git a/example/basic-dapp/index.html b/example/basic-dapp/index.html
@@ -50,6 +50,9 @@
       <button id="connect" disabled="true">Connect
         Wallet
       </button>
+      <button id="logout" disabled="true">
+        Logout
+      </button>
       <footer>
         <p>Address: <span id="address">N/A</span></p>
         <p>OAuth Code: <span id="oauth_code">N/A</span></p>
diff --git a/example/basic-dapp/index.js b/example/basic-dapp/index.js
@@ -475,6 +475,7 @@ function isAnyWebInstall() {
 async function walletInitialized() {
   // connect
   const connectButton = getElement('connect')
+  const logoutButton = getElement('logout')
   const sendNativeTokenButton = getElement('send_native_token')
   const approveButton = getElement('approve')
   const transferFromButton = getElement('transfer_from')
@@ -491,36 +492,37 @@ async function walletInitialized() {
 
   const deployContract = getElement('deploy_contract')
 
-  async function authed(address) {
+  function authed(address, oauthCode = undefined) {
     if (!address || address === '') {
       return unAuthed()
     }
-    const oauthCode = await provider.request({
-      method: 'anyweb_oauth',
-    })
     getElement('address').innerHTML = address
-    getElement('oauth_code').innerHTML = oauthCode
+    if (oauthCode) {
+      getElement('oauth_code').innerHTML = oauthCode
+    }
     console.log('authed address: ', address)
-    console.log('OAuth Code: ', oauthCode)
     sendNativeTokenButton.disabled = false
     approveButton.disabled = false
     transferFromButton.disabled = false
     deployContract.disabled = false
     getCFXButton.disabled = false
     connectButton.disabled = true
+    logoutButton.disabled = false
     importAddressButton.disabled = false
     importPrivateKeyButton.disabled = false
   }
 
   function unAuthed() {
     getElement('address').innerHTML = 'N/A'
+    getElement('oauth_code').innerHTML = 'N/A'
     console.log('unauthed')
     sendNativeTokenButton.disabled = true
     approveButton.disabled = true
     transferFromButton.disabled = true
     getCFXButton.disabled = true
     deployContract.disabled = true
     connectButton.disabled = false
+    logoutButton.disabled = true
     importAddressButton.disabled = true
     importPrivateKeyButton.disabled = true
   }
@@ -547,18 +549,21 @@ async function walletInitialized() {
       getElement('version').innerHTML = version
     })
 
-    const [chainId, networkId, alreadyAuthedAddresses] = await Promise.all([
+    const [chainId, networkId, authResult] = await Promise.all([
       provider.request({ method: 'cfx_chainId' }),
       provider.request({ method: 'cfx_netVersion' }),
       provider.request({
         method: 'cfx_accounts',
         params: [
           {
             availableNetwork: [1, 1029],
+            scopes: ['baseinfo', 'phone'],
           },
         ],
       }),
     ])
+    const { address: alreadyAuthedAddresses, code, scopes } = authResult
+    console.log('DApp 获取到的授权结果', authResult)
 
     getElement('initialized').innerHTML = 'initialized'
     getElement('chainId').innerHTML = chainId
@@ -571,19 +576,32 @@ async function walletInitialized() {
     ) {
       unAuthed()
     } else {
-      authed(alreadyAuthedAddresses[0])
+      authed(alreadyAuthedAddresses[0], code)
     }
   } catch (e) {
     unAuthed()
     console.error('try 到错误了', e)
   }
 
-  connectButton.onclick = () => {
+  connectButton.onclick = async () => {
+    const { address, code } = await provider.request({
+      method: 'cfx_accounts',
+      params: [
+        {
+          availableNetwork: [1, 1029],
+          scopes: ['baseinfo', 'phone'],
+        },
+      ],
+    })
+    authed(address, code)
+  }
+
+  logoutButton.onclick = () => {
     provider
       .request({
-        method: 'cfx_requestAccounts',
+        method: 'anyweb_logout',
       })
-      .then(authed)
+      .then(unAuthed)
       .catch(console.error)
   }
 
diff --git a/src/interface/provider.ts b/src/interface/provider.ts
@@ -56,6 +56,7 @@ export interface IAuthResult {
   address: string[]
   url: string
   oauthToken: string
+  scopes: string[]
 }
 
 export interface IProviderRpcError extends Error {
@@ -77,7 +78,7 @@ export interface IIframeOptions {
   appId: string
   params: string
   chainId: string
-  scope?: number[]
+  scopes?: string[]
   authType?:
     | 'account'
     | 'createContract'
diff --git a/src/provider.ts b/src/provider.ts
@@ -12,7 +12,13 @@ import {
   IProviderRpcError,
   IRequestArguments,
 } from './interface/provider'
-import { callIframe, readCache, setCache } from './utils/common'
+import {
+  callIframe,
+  isIncluded,
+  readCache,
+  removeCache,
+  setCache,
+} from './utils/common'
 import config from '../package.json'
 import { AddressType, getAddressType } from './utils/address'
 import { ConsoleLike } from './utils/types'
@@ -33,6 +39,9 @@ export class Provider implements IProvider {
   networkId = -1
   chainId = -1
   url = ''
+  scopes: string[] = []
+  reAuth = false
+
   events: {
     onConnect?: (connectInfo: IProviderConnectInfo) => void
     onDisconnect?: (error: IProviderRpcError) => void
@@ -150,27 +159,53 @@ export class Provider implements IProvider {
       case 'cfx_requestAccounts':
         return this.rawRequest('cfx_accounts')
       case 'cfx_accounts':
+        const scopes: string[] =
+          (params && 'scopes' in paramsObj ? paramsObj['scopes'] : []) || []
+        console.log('paramsObj', paramsObj)
+        console.log('scopes', scopes, this.scopes)
         if (this.address.length > 0) {
-          return this.address
+          if (isIncluded(this.scopes, scopes)) {
+            if (scopes.length === 0) {
+              return this.address
+            } else {
+              return {
+                address: this.address,
+                code: this.oauthToken,
+                scopes: scopes,
+              }
+            }
+          } else {
+            removeCache(this)
+          }
         }
-        console.log('cfx_accounts参数', paramsObj)
         const result = (await callIframe(
           'pages/dapp/auth',
           {
             appId: this.appId,
             params: params ? JSON.stringify(paramsObj) : '',
             chainId: (await this.request({ method: 'cfx_chainId' })) as string,
             authType: 'account',
+            scopes: scopes,
           },
-          this
+          this,
+          this.reAuth
         )) as IAuthResult
+        result.scopes = scopes
+        this.reAuth = false
         setCache(result, this)
         this.events.onAccountsChanged &&
           this.events.onAccountsChanged(result.address)
         this.events.onChainChanged &&
           this.events.onChainChanged(String(result.chainId))
         this.events.onNetworkChanged &&
           this.events.onNetworkChanged(String(result.networkId))
+        if (scopes.length > 0) {
+          return {
+            address: this.address,
+            code: result.oauthToken,
+            scopes: scopes,
+          }
+        }
         return this.address
       case 'cfx_sendTransaction':
         try {
@@ -218,11 +253,6 @@ export class Provider implements IProvider {
         }
       case 'anyweb_version':
         return config.version
-      case 'anyweb_oauth':
-        if (this.oauthToken) {
-          return this.oauthToken
-        }
-        throw new Error('Get oauth token failed: get account address first')
       case 'anyweb_home':
         return await callIframe(
           'pages/index/home',
@@ -234,6 +264,21 @@ export class Provider implements IProvider {
           },
           this
         )
+      case 'anyweb_logout':
+        try {
+          removeCache(this)
+          this.reAuth = true
+          // sendMessageToApp({
+          //   type: 'event',
+          //   data: {
+          //     type: 'logout',
+          //     appId: this.appId,
+          //   },
+          // })
+        } catch (e) {
+          return e
+        }
+        return 'success'
       default:
         return 'Unsupported method'
     }
diff --git a/src/utils/common.ts b/src/utils/common.ts
@@ -232,19 +232,22 @@ export const callIframe = async (
     appId,
     params,
     chainId,
-    scope = [2],
+    scopes = [],
     authType,
     waitResult = true,
   }: IIframeOptions,
-  provider: Provider
+  provider: Provider,
+  reAuth = false
 ) => {
   if (waitResult) {
     return new Promise<unknown>(async (resolve, reject) => {
       let callback: IIframeData | undefined = undefined
       const close = await getIframe(
         `${path}?appId=${appId}&authType=${authType}&random=${Math.floor(
           Math.random() * 1000
-        )}&chainId=${chainId}&params=${params}&scope=${JSON.stringify(scope)}`,
+        )}&chainId=${chainId}&params=${params}&scopes=${JSON.stringify(
+          scopes
+        )}&reAuth=${reAuth}`,
         () => {
           if (timer) {
             clearTimeout(timer)
@@ -306,7 +309,7 @@ export const callIframe = async (
     await getIframe(
       `${path}?appId=${appId}&authType=${authType}&random=${Math.floor(
         Math.random() * 1000
-      )}&chainId=${chainId}&params=${params}&scope=${JSON.stringify(scope)}`,
+      )}&chainId=${chainId}&params=${params}&scopes=${JSON.stringify(scopes)}`,
       () => {
         return
       }
@@ -328,13 +331,15 @@ export const readCache = (provider: Provider) => {
       Object.keys(result).includes('chainId') &&
       Object.keys(result).includes('expires') &&
       Object.keys(result).includes('oauthToken') &&
+      Object.keys(result).includes('scopes') &&
       result.expires > new Date().getTime()
     ) {
       provider.address = result.address
       provider.networkId = result.networkId
       provider.chainId = result.chainId
       provider.url = result.url
       provider.oauthToken = result.oauthToken
+      provider.scopes = result.scopes
     }
   } catch (e) {
     provider.logger.error(e)
@@ -355,5 +360,24 @@ export const setCache = (data: IAuthResult, provider: Provider) => {
   provider.chainId = data.chainId || provider.chainId
   provider.url = data.url
   provider.oauthToken = data.oauthToken || provider.oauthToken
+  provider.scopes = data.scopes || provider.scopes
   return data
 }
+
+export const removeCache = (provider: Provider) => {
+  window.localStorage && window.localStorage.removeItem('anyweb_info')
+  provider.address = []
+  provider.networkId = -1
+  provider.chainId = -1
+  provider.url = ''
+  provider.oauthToken = undefined
+  provider.scopes = []
+}
+
+export const isArrEqual = <T>(arr1: T[], arr2: T[]) => {
+  return arr1.length === arr2.length && arr1.every((ele) => arr2.includes(ele))
+}
+
+export const isIncluded = <T>(arr1: T[], arr2: T[]): boolean => {
+  return arr1.length === new Set([...arr1, ...arr2]).size
+}
