企业网站的主要功能优秀网页设计作品案例欣赏

小程序登录

涂鸦官方提供了登录能力，开发者可以通过相关 API 获取 App 的用户身份标识，快速的建立小程序内的用户体系。

登录流程

说明

1. 需要调用 ty.login() 获取 临时登录凭证 code，并将 code 传到开发者服务器
2. 开发者服务器调用涂鸦云开发能力 API /1.0/token，传入 code，获取 access_token 及 uid，然后开发者根据 aceess_token 及 uid 自定义登录状态，并返回给前端，然后进行后续的交互。

注意：在开发小程序前，请先确保已经将小程序与云项目进行关联，关联方法请参考下面的服务器开发。

服务器开发

开发者服务器端要调用涂鸦云开发能力 API，需要创建云项目，并需要将云项目应用与小程序进行关联。

• 使用 IoT 账号登录到 IoT 平台，选择云开发菜单，点击创建云项目

• 创建成功后，即在云项目的详细页面中查询获取 Client ID 及 Client secret，用于请求 API 签名

 

• 到小程序开发者平台，进入小程序开发设置菜单，点击云项目模块的 添加 按钮，然后选择对应的云项目关联。

相关文档：

1. 云开发开发文档，可参考这里文档。
2. API 签名机制，可参考这里

代码示例

小程序代码

import {getStorageSync,getSystemInfoSync,login,removeStorageSync,request,setStorageSync,getUserInfo,showModal,
} from '@ray-js/ray';const { code } = await login({});
const { nickName, avatorUrl } = new Promise((resolve, reject) =>getUserInfo({ success: resolve, failure: reject }),
);
request({url: `https://wwww.xxx.com/login`,method: 'POST',header: {'Content-Type': 'application/json',},data: {code,nickName,avatorUrl,},success: ({ data }: any) => {// 由于小程序没有 cookie，这时使用 storage 管理登录态setStorageSync({key: 'session',data,});},failure: () => {showModal({title: '提示',content: '登录失败',showCancel: false,});},
});

服务器端代码（这里使用 Nodejs Koa 实现）

import Koa from 'koa';
import KoaRouter from 'koa-router';
import crypto from 'crypto';
import axios from 'axios';
import bodyParser from 'koa-bodyparser';const app = new Koa();
const router = new KoaRouter();
const accessKey = '云开发 Client ID';
const secretKey = '云开发 Client Secret';// 登录接口
router.post(`/login`, async (ctx) => {const { code, nickName, avatorUrl } = ctx.request.body;// 加密处理const contentHash = crypto.createHash('sha256').update('').digest('hex');const t = +new Date();const nonce = '';const stringToSign = ['GET', contentHash, '', path].join('\n');const signStr = [accessKey, t, nonce, stringToSign].join('');const sign = crypto.createHmac('sha256', secretKey).update(signStr, 'utf8').digest('hex').toUpperCase();const { data } = await axios({// 不同的地区需要使用不同的域名地址，这里为中国区地址url: `https://openapi.tuyacn.com/v1.0/token?code=${code}&grant_type=2`,method: 'GET',headers: {t,sign,client_id: accessKey,sign_method: 'HMAC-SHA256',Dev_lang: 'Nodejs','Signature-Headers': '',},});let responseData;if (data.success) {const { uid } = data.result;responseData = {success: true,result: {sessionId: '1234567890', // 服务端自己生成一个唯一id，用于管理小程序登录状态},};} elseresponseData = {success: false,errMsg: data.msg,errCode: data.code,};{}ctx.body = responseData;
});app.use(bodyParser()).use(router.allowedMethods()).use(router.routes());app.listen(3000, async () => {console.log(`Server start on http://localhost:9000`);
});