yach.open.yylogin

yach 扫码登录 jssdk

目前支持扫码登录，以及获取本地已登录知音楼账户后，点击头像快速登录。

安装

yarn add yach.open.yylogin

使用

浏览器使用

<!-- 引入 -->
<script src="node_modules/yach.open.yylogin/lib/yyLogin.browser.js"></script>
<!-- 使用 -->
window.yyLogin(options);

npm 使用

// 引入
import yyLogin from "yach.open.yylogin";
// 使用
yyLogin(options);

options

| 参数 | 必填 | 备注 | | ------ | ---- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | goto | 是 | goto 参数结构：https://yach-oapi-test.zhiyinlou.com/connect/oauth2/sns_authorize?appid=APPID&response_type=code&scope=snsapi_login&state=STATE&redirect_uri=REDIRECT_URI，并且要将goto参数urlencode编码。 | | style | 否 | 渲染二维码的区域的样式，可以自定义去除背景颜色和边框 | | width | 否 | 表示显示二维码的区域的宽 二维码大小是固定的 210px*210px | | height | 否 | 表示显示二维码的区域的 | | env | 否 | 环境：dev、test、pre、online(default) |

示例

import yyLogin from "yach.open.yylogin";
/*
 * 解释一下goto参数，参考以下例子：
 * const url = encodeURIComponent('http://localhost.me/index.php?test=1&aa=2');
 * const goto = encodeURIComponent('https://yach-oapi-test.zhiyinlou.com/connect/oauth2/sns_authorize?appid=appid&response_type=code&scope=snsapi_login&state=STATE&redirect_uri='+url)
 */
const obj = yyLogin({
  id: "login_container", //这里需要你在自己的页面定义一个HTML标签并设置id，例如<div id="login_container"></div>或<span id="login_container"></span>
  goto: "", //请参考注释里的方式
  style: "border:none;background-color:#FFFFFF;",
  width: "365px",
  height: "400px",
  env: "test",
});

回调

您引入的js会在获取用户扫描之后将获取的token通过window.parent.postMessage(data,'*');返回给您的网站。 data示例：

1. 扫码后返回临时登陆码

{
  code: 'xxxxxx',
  type: 'loginTmpCode'
}

1. 点击头像快速登录后返回免登码

{
  code: 'xxxxxxxxxx',
  type: 'authCode'
}

您可以通过以下代码获取这个data：

const hanndleMessage = function (event) {
    const {origin, data } = event;
    const origins = [
        'http://127.0.0.1:8000',
    ];// 白名单
    if (origins.includes(origin)) {
        if(!data || typeof data !== 'string'){// Safari兼容
            return console.error('recive unexpected message: ', event);
        }
        try {
            const { code, type } = JSON.parse(data);
            if(type === 'authCode'){//免登码 点击头像
                // xxxxxx
            }
            if(type === 'loginTmpCode'){// 临时登陆码  扫码
                // xxxx
            }
        } catch (error) {
            console.log('返回数据格式异常： ',error)
        }

    }
};
if (typeof window.addEventListener !== 'undefined') {
    window.addEventListener('message', hanndleMessage, false);
} else if (typeof window.attachEvent !== 'undefined') {
    window.attachEvent('onmessage', hanndleMessage);
}