登录

通用注册登录

请参考通用注册登录章节

第三方登录

使用前,请确保已经完成了第三方授权配置

BaaS.auth.loginWithThirdParty(provider, authPageUrl, options)

参数说明

参数 类型 必填 默认值 说明
provider String - 第三方平台
authPageUrl String - 授权页面 URL
options.debug Boolean false 是否开启 debug 模式
options.mode String 'popup-window' 授权窗口打开模式
options.authModalStyle Object {} popup-iframe 模式下,授权模态框的样式
options.wechatIframeContentStyle Object {} 微信 web 授权,在 popup-iframe 模式下,微信授权页面的样式
options.windowFeatures String '' popup-window 模式下,授权窗口的特性,详见 strWindowFeatures
options.createUser Boolean true 是否创建用户
options.syncUserProfile String 'setnx' 是否同步第一层级用户信息,可选值为 overwrite、setnx、false

必填参数:

  1. provider - 第三方平台。目前支持三个平台 oauth-wechat-mp(微信公众号)、oauth-wechat-web(微信网页)、oauth-weibo(新浪微博)

  2. authPageUrl - 授权页面 URL。进行授权时,SDK 会打开一个新窗口(或 iframe,具体请查看参数 options.mode ),在该页面中跳转到第三方授权页面进行授权, 并将结果返回给授权调用方(loginWithThirdParty 或 linkThirdParty 接口),所以该页面是整个授权过程的总控页面。页面不需要开发者自行开发,我们已经提供了模版,只需要改一下配置项, 并放到自己的服务器下即可。页面的内容请查看下方的授权页面模版。

    授权页必须与主页面同源。

可选参数:

  1. options.debug - 是否开启 debug 模式 。debug 模式为开启状态下,假如授权失败,授权页面不会关闭,方便开发者调试接口。

    生产环境请关闭 debug 模式。

  2. options.mode - 授权窗口打开模式 。支持三种模式,分别为popup-window(新窗口打开授权页面)、popup-iframe(在 iframe 中打开授权页面)、redirect(在当前页面中跳转到授权页面)。 移动端推荐使用redirect模式(微信内置浏览器中,只能使用这种模式)。

  3. options.authModalStyle - mode 为 popup-iframe 时,授权模态框的样式。数据结构为:

    {
     container: {
       // 弹窗的最外层 div 样式
     },
     iframe: {
       // iframe 样式
     },
     closeButton: {
       // 删除按钮样式
     }
    }
    
  4. options.wechatIframeContentStyle - providor 为 'oauth-wechat-web',mode 为 'popup-iframe' 时,微信授权页面的样式。数据结构为:

    {
     style: '',  // 提供"black"、"white"可选,默认为黑色文字描述。
     href: ''  // 自定义样式链接,第三方可根据实际需求覆盖默认样式。
    }
    

    字段 style,href 的作用与调用微信官方 SDK 时传的参数一致。 参数 options.wechatIframeContentStyle 与参数 options.authModalStyle 配合,可以实现自定义整个授权弹窗样式(仅微信 web 授权)。

  5. options.windowFeatures - mode 为 popup-window 时的弹窗样式,详见 strWindowFeatures。 如果没传该参数,或值为 '',浏览器会新建一个 tab 来打开页面。

  6. options.createUser - 是否创建用户。

  7. options.syncUserProfile - 是否同步第一层级用户信息。可选值为 overwritesetnxfalse

返回结果

Promise<UserRecord>

请求示例

BaaS.auth.loginWithThirdParty('oauth-wechat-web', '/auth.html')
  .then(user => {
    // 登录成功
  })
  .catch(err => {
    // 登录失败
  })

err 对象结构请参考错误码和 HError 对象

关联第三方账号

使用前,请确保已经完成了第三方授权配置

UserRecord.linkThirdParty(provider, authPageUrl, options)

参数说明

参数 类型 必填 默认值 说明
provider String - 第三方平台
authPageUrl String - 授权页面 URL
options.debug Boolean false 是否开启 debug 模式
options.mode String 'popup-window' 授权窗口打开模式
options.authModalStyle Object {} popup-iframe 模式下,授权模态框的样式
options.wechatIframeContentStyle Object {} 微信 web 授权,在 popup-iframe 模式下,微信授权页面的样式
options.windowFeatures String '' popup-window 模式下,授权窗口的特性
options.syncUserProfile String 'setnx' 是否同步第一层级用户信息,可选值为 overwrite、setnx、false

接口的参数与第三方登录几乎相同,只少了 option.createUser 参数,因为只有已经登录用户才能关联第三方账号。

请求示例

BaaS.auth.getCurrentUser().then(user => {
  return user.linkThirdParty('oauth-wechat-web', '/auth.html')
})
  .then(() => {
    // 关联成功
  })
  .catch(err => {
    // 关联失败
  })

err 对象结构请参考错误码和 HError 对象

获取授权结果(options.mode 为 redirect)

BaaS.auth.getRedirectResult()

redirect 模式是直接在页面内跳转到授权,在授权完成后并不能直接在调用用授权的地方直接往下执行(popup-windowpopup-iframe 这两种模式可以), 而是会直接重定向回调用授权的页面,授权结果放在页面 URL 中。该接口就是获取 URL 中的授权结果的。请在页面加载时或页面 js 代码的最顶部调用该接口 来判断授权操作是否成功。

请求示例

BaaS.auth.getRedirectResult().then(user => {
  return user.linkThirdParty('oauth-wechat-web', '/auth.html')
})
  .then(result => {
    // 获取授权结果成功,可以在这里做登录后的操作
  })
  .catch(err => {
    // 未获取到结果
  })

返回值

Promise<Result>

Result 数据结构:

字段 类型 说明
status String 状态。 'success' / 'fail'
action String 操作。'login'(第三方登录) / 'associate'(关联第三方账号)
user String 当前用户对象,仅 status 为 'success' 且 action 为 'login' 时返回

第三方授权

BaaS.auth.thirdPartyAuth()

调用该接口会跳转到第三方授权页面,用户操作后,会将结果回传给授权调用方。popup-window 模式会传给 window.opener,popup-iframe 模式会传给 window.parent,redirect 模式会将结果拼到 URL 中, 并重定向到调用页面(通过获取授权结果接口可以获取到结果)。

一般来说,该接口只在授权页中使用。

授权页模版

使用以下代码创建一个 html 文件,将该文件放置到服务器中(必须与调用授权的页面同源), 并保证通过 url 能访问到该文件。

代码中的 <sdk-url> 需要替换成知晓云 SDK 在服务器中的 URL,<cilent-id> 需要 替换为应用的 clientId。

单页应用的开发者,也可以不使用该模版,只要保证 authPageUrl 能访问到的对应的页面, 并且进入页面立即调用 BaaS.auth.thirdPartyAuth 即可。

授权页是用来控制整个授权流程的,不要在页面内做其他操作。

<!doctype html>
<html>
  <head>
  </head>
  <body>
    <script src="<sdk-url>"></script>
    <script>
      window.BaaS.init('<clinet-id>')
      window.BaaS.auth.thirdPartyAuth()
    </script>
  </body>
</html>

移动端示例

// 授权完成后,页面会重定向回来,接口能从 URL 中获取到授权结果。
BaaS.auth.getRedirectResult()
  .then(result => {
    // 获取授权结果成功
  })
  .catch(err => {
    // 未找到授权结果
  })

...

// 在页面中调用登录接口后,页面会重定向到授权页。
BaaS.auth.loginWithThirdParty('oauth-wechat-mp', '/auth.html', {
  mode: 'redirect',
})
  .catch(err => {
    // 接口调用失败
  })

...

时序图

以 loginWithThirdParty 为例

  1. mode 为 'popup-window' 或 'popup-window' 时,接口的调用过程:

    弹窗模式时序图
    弹窗模式时序图
  2. mode 为 'redirect' 时,接口的调用过程:

    重定向模式时序图
    重定向模式时序图

results matching ""

    powered by

    No results matching ""