yach.open.yylogin

1.1.0 • Public • Published

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);
}

Readme

Keywords

none

Package Sidebar

Install

npm i yach.open.yylogin

Weekly Downloads

2

Version

1.1.0

License

ISC

Unpacked Size

9.45 kB

Total Files

5

Last publish

Collaborators

  • liuxiaodong333
  • bgm77
  • simple1111
  • zhanglu75
  • wenai
  • earl_yach
  • wangzheng_jzb
  • liuqingsong
  • qinghua2900