详解小步伐常见的登录方式
1. 小步伐登录小步伐有两种登录方式，一种基于手机号码进行登录，另一种是利用用户在公众号下的唯一标识（openid）进行登录(小步伐是公众号的一种).
接下来先解说下，基于 openid 登录。
1.1 基于 openid 登录
先看下图，形貌通过微信小步伐提供的 code 换取当前用户在小步伐中的唯一标识，详细流程可以参数下图：
https://img-blog.csdnimg.cn/direct/c542bf2be3f54b328e2c2e6eaec0fb14.jpeg#pic_center
接下来通过代码实现下大概流程:
[*]获取 code
uni.login({
success: async (res) => {
if (res.errMsg === 'login:ok') {
const { data } = await login({
code: res.code,
});
// 保存用户信息
}
},
fail(e) {
uni.showToast({
title: e.message,
});
},
});
[*]服务端接收 code 去微信后台换取对应 openid
// nodejs 部分代码
const { appid, secret, grant_type } = require('../config/wx');
router.post('/login', (req, res) => {
const { code } = req.query;
const { appid, secret, grant_type } = require('../config/wx');
const { openid } = await request.get('/sns/jscode2session', {
appid,
secret,
js_code: code,
grant_type,
});
});
[*]在数据库中查找对应 openid 是否存在
const { appid, secret, grant_type } = require('../config/wx');
router.post('/login', (req, res) => {
// 1. 获取 code
const { code } = req.query;
// 2. 通过 code 获取 openid 和 session_key
const { openid } = await request.get('/sns/jscode2session', {
appid,
secret,
js_code: code,
grant_type,
});
// 3. 查找用户是否已经注册
models.user
.findOne({
where: {
openid,
},
})
.then((user) => {
if (user) {
// 3.2 如果用户已经注册，返回用户信息
res.json(
new Result({
data: user,
msg: '登录成功',
})
);
} else {
// 3.3 如果用户没有注册，创建用户并返回用户信息
const username = randomUserName();
models.user
.create({
nickname: username,
openid,
avatar: '/uploads/default-avatar.png',
})
.then((user) => {
res.json(
new Result({
data: user,
msg: '登录成功',
})
);
});
}
});
});
上面就是一个基于 code 获取 openid，并通过 openid 创建新的用户，并将创建好的用户返回。
为了方便明白，这里简化形貌了登录逻辑。在现实业务代码中，通常会利用 openid 、 session key 和用户信息来创建自定义登录凭据（token），并在登录时将用户信息和 token 一起返回给前端。前端会将 token 存储在本地，并在下一次需要登录的业务请求中携带 token，从而实现业务鉴权的功能。这种方式通常利用 JWT（JSON Web Token）等工具来实现。在后续的解说中，我们将详细先容这些概念和技术细节。
1.2 手机号码快捷登录
获取手机号码的前提：
[*]非个人小步伐
[*]认证的小步伐
[*]非海外的企业认证
下面是大概业务流程图：
https://img-blog.csdnimg.cn/direct/530b4bd65b534c7698c64cb0b102c7fc.png#pic_center
1.2.1 获取对应 code
<template>
<button
class="login-btn"
open-type="getPhoneNumber"
@getphonenumber="getPhoneNumber"
>
手机号码登录
</button>
</template>
<script>
export default {
setup() {
// 目前该接口针对非个人开发者，且完成了认证的小程序开放（不包含海外主体）
const getPhoneNumber = (e) => {
const { code, errMsg } = e.detail;
if (errMsg === 'getPhoneNumber:ok') {
const { data } = await loginByPhone({
code,
});
} else {
uni.showToast({
title: errMsg,
});
}
};
return {
getPhoneNumber,
};
},
};
</script>
1.2.2 后端处置惩罚逻辑
// 基于手机号登录
router.post('/loginByPhone', async function (req, res) {
try {
// 1. 获取 code 和 loginCode
const { code } = req.body;
// 2. 获取接口调用凭据，理论上这里需要缓存 access_token，避免频繁调用接口
const { access_token } = await request.get('/cgi-bin/token', {
grant_type: 'client_credential',
appid,
secret,
});
// 3. 获取手机号
const { phone_info } = await request.post(
`/wxa/business/getuserphonenumber?access_token=${access_token}`,
{
code,
}
);
// 4. 查找用户是否已经注册
// 4.1 根据 phone 查找用户
const { purePhoneNumber } = phone_info;
models.user
.findOne({
where: {
purePhoneNumber,
},
})
.then((user) => {
if (user) {
// 4.2 如果用户已经注册，返回用户信息
res.json(
new Result({
data: user,
msg: '登录成功',
})
);
} else {
// 4.3 如果用户没有注册，创建用户并返回用户信息
const username = randomUserName();
models.user
.create({
nickname: username,
avatar: '/uploads/default-avatar.png',
phone: phone_info.purePhoneNumber,
})
.then((user) => {
res.json(
new Result({
data: user,
msg: '登录成功',
})
);
});
}
});
} catch (error) {
res.json(
new Result({
code: 'BIZ_ERROR',
msg: error.errmsg || error.message,
})
);
}
});
上面代码，实现获取手机号码并利用手机号码作为唯一标识，进行用户创建和查找的操作。
从登录的角度来看，利用手机号码作为唯一标识符是没有问题的。然而，如果用户实验利用非手机号码（例如 OpenID）进行登录，并在数据库中找不到匹配的记录时，系统会创建一个新的账号。这大概导致同一个用户在系统中存在多个账号的情况。
为了优化这种情况，可以思量以下几种方法：
[*]当用户利用 openid 登录后，检测未绑定手机号码时，进行号码绑定
[*]当用户利用手机号码登录时，提前调用 wx.login 获取对应 code，换取 openid 把他与手机号码进行关联
现在基于上面的代码，接纳第二种方案，只需要微调下代码就能办理这个问题。
[*]登录时把 wx.login 获取 code 通报给后端
<template>
<button
class="login-btn"
open-type="getPhoneNumber"
@getphonenumber="getPhoneNumber"
>
手机号码登录
</button>
</template>
<script>
export default {
setup() {
// 目前该接口针对非个人开发者，且完成了认证的小程序开放（不包含海外主体）
const getPhoneNumber = (e) => {
const { code, errMsg } = e.detail;
if (errMsg === 'getPhoneNumber:ok') {
uni.login({
success: async (res) => {
if (res.errMsg === 'login:ok') {
const { data } = await loginByPhone({
code,
loginCode: res.code,
});
userStore.setUserInfo(data);
uni.navigateBack();
}
},
fail(e) {
uni.showToast({
title: e.message,
});
},
});
} else {
uni.showToast({
title: errMsg,
});
}
};
return {
getPhoneNumber,
};
},
};
</script>
[*]服务端基于 loginCode 换取 openid
// 基于手机号登录
router.post('/loginByPhone', async function (req, res) {
try {
// 1. 获取 code 和 loginCode
const { code, loginCode } = req.body;
// 2. 获取接口调用凭据，理论上这里需要缓存 access_token，避免频繁调用接口
const { access_token } = await request.get('/cgi-bin/token', {
grant_type: 'client_credential',
appid,
secret,
});
// 3. 获取 openid
const { openid } = await request.get('/sns/jscode2session', {
appid,
secret,
js_code: loginCode,
grant_type,
});
// 4. 获取手机号
const { phone_info } = await request.post(
`/wxa/business/getuserphonenumber?access_token=${access_token}`,
{
code,
openid,
}
);
// 5. 查找用户是否已经注册
// 5.1 根据 openid 查找用户
models.user
.findOne({
where: {
openid,
},
})
.then((user) => {
if (user) {
// 5.2 如果用户已经注册，返回用户信息
res.json(
new Result({
data: user,
msg: '登录成功',
})
);
} else {
// 5.3 如果用户没有注册，创建用户并返回用户信息
const username = randomUserName();
models.user
.create({
nickname: username,
openid,
avatar: '/uploads/default-avatar.png',
phone: phone_info.purePhoneNumber,
})
.then((user) => {
res.json(
new Result({
data: user,
msg: '登录成功',
})
);
});
}
});
} catch (error) {
res.json(
new Result({
code: 'BIZ_ERROR',
msg: error.errmsg || error.message,
})
);
}
});
这种方案被视为最佳的办理方案，可以或许有效办理多账号和绑定手机号码等问题。 现实上，接纳哪种方式取决于详细的业务场景，因为在某些情况下，用户大概会担心手机号码泄漏而不愿接纳这种方式。
1.2.3 留意
[*]获取手机号码是需要收费，每次调用需要 0.03 元。
[*]wx.login 与 getPhoneNumber 中获取的 code 不是同一个
总结
[*]基于 openid 或 手机号码快捷登录
[*]获取手机号码前置条件
[*]怎样办理多账号的问题
[*]解说前端、后端、微信登录过程中完备交互流程，方便更好去明白小步伐登录
如果您有任何疑问，请随时在批评区留言。
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]