Skip to content

Commit

Permalink
update readme
Browse files Browse the repository at this point in the history
  • Loading branch information
raychenfj committed Feb 26, 2018
1 parent ed2cda1 commit 1b6082e
Show file tree
Hide file tree
Showing 5 changed files with 60 additions and 5 deletions.
38 changes: 37 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -56,13 +56,49 @@ new Vue({
### 调用

```js
this.$wechatAuth.authorize()
this.$wechatAuth.authorize()
```

## 运行例子

1.```examples``` 文件夹中的 ```config.example.js``` 重命名为 ```config.js```

2. 修改 ```config.js```, 填入微信 appid 和 scope, 并在 ```authorize``` 方法中调用后端接口获取用户信息,并将用户信息返回

4. 修改 ```host``` 文件,将微信授权域名映射为 ```localhost```

3. 运行 ```npm run example```

4. 在微信开发者工具中访问 ```授权域名/examples/index.html```(因为修改了host,这时访问的实际上是本地)

5. 能显示当前用户的 ```openid```

![openid](./images/openid.png)


## options

| 属性 | 类型 | 必输 | 默认 | 说明 |
|-------|-------|-------|-------|-------|
| autoRedirect | boolean || true | 当 url 中不包含 code 参数或返回结果中不包含openid时,是否自动重定向到微信授权url |
| appId | string || | 微信 appid |
| scope | string || | 微信 scope, ```snsapi_base``````snsapi_userinfo``` |
| state | string || '' | 微信 state |
| authorize | function | 是 | | ajax 请求调用后端接口获取微信用户信息
| ssr | boolean || | 是否使用服务端渲染,尚未实现 |

## VWechatAuth 实例

| 属性 | 说明 |
|------|------|
| user | 当获取用户信息成功后,存储了用户的信息,否则为一个空对象 |

| 方法 | 参数 | 返回 | 说明 |
|------|------|-------|------|
| authorize | onSuccess,执行成功的回调函数 <br/> onFail,执行失败的回调函数 | Promise | 授权获取用户信息,支持回调函数 和 Promise



## License

[MIT](http://opensource.org/licenses/MIT)
10 changes: 8 additions & 2 deletions examples/config.example.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,13 @@
var config = {
appId: '', // your wechat appid,
scope: '', // snsapi_base or snsapi_userinfo
authorize () {
scope: 'snsapi_userinfo', // snsapi_base or snsapi_userinfo
/**
*
* @param {*} code
* @param {*} success if you use callback, don't return anything in the function, and call success and pass response data to it
* @param {*} fail
*/
authorize (code, success, fail) {
return axios.get('your backend api here', { params: { code: code } })
.then(function (res) {
var data = (res && res.data) || {} // response data should at least contain openid
Expand Down
4 changes: 2 additions & 2 deletions examples/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<html style="font-size:40px">

<head>
<title>v-wechat-auth</title>
<title>v-wechat-auth example</title>
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="./config.js"></script>
Expand All @@ -20,7 +20,7 @@
new Vue({
el: '#app',
data: {
user: null
user: {}
},
wechatAuth: new VWechatAuth(config),
created () {
Expand Down
Binary file added images/openid.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
13 changes: 13 additions & 0 deletions src/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ export default class WechatAuth {
* @property {boolean} autoRedirect optional, auto redirect to wechat oauth url when there is no code in query or no openid in ajax response
* @property {string} appId required, wechat appId
* @property {string} scope required, wechat auth scope, snsapi_base or snsapi_userinfo
* @property {string} state optional, wechat state
* @property {function} authorize required, an ajax call to back end and should return an object contains openid at least, support promise or callback
* @property {boolean} ssr optional, used in server side render, feature not implement yet
*/
Expand All @@ -43,6 +44,12 @@ export default class WechatAuth {
this.user = null
}

/**
* authorize
* @param {*} onSuccess
* @param {*} onFail
* @returns {Promise}
*/
authorize (onSuccess, onFail) {
const urlObj = url.parse(window.location.href, true)

Expand Down Expand Up @@ -84,6 +91,7 @@ export default class WechatAuth {
}

/**
* onSuccess
* @private
* @param {*} data
*/
Expand All @@ -101,6 +109,7 @@ export default class WechatAuth {
}

/**
* onFail
* @private
* @param {*} e
*/
Expand All @@ -109,6 +118,10 @@ export default class WechatAuth {
console.error(e)
}

/**
* redirect to wechat auth url
* @param {*} url
*/
redirect (url) {
const options = this.options
window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${options.appId}&redirect_uri=${encodeURIComponent(url)}&response_type=code&scope=${options.scope}&state=${options.state}#wechat_redirect`
Expand Down

0 comments on commit 1b6082e

Please sign in to comment.