uniapp微信小程序授权登录页面

我的微信小程序上线了,AI识图生诗词文案,识别图片生成古诗词,欢迎大家使用。

(用户日访问量太少了,大家帮我踩一下,谢谢!)

以下是我在开发中的一些经验和心得。

通过访问uni.login,实现微信授权登录。全程不获取用户的任何信息。所以也不需要用户授权,直接实现后端登录的功能。

以下是小程序代码:

<template>
    <view class="wrapper">
        <button @click="wechatLogin">微信授权一键登录</button>
    </view>
</template>
<script>
import { mapMutations } from 'vuex';

export default {
    data() {
        return {

        };
    },

    methods: {
        ...mapMutations(['saveLoginStatus', 'saveUserInfo']),

        async wechatLogin() {
            try {
                const loginRes = await uni.login({ provider: 'weixin' });
                const userInfoRes = await uni.getUserInfo({ provider: 'weixin' });

                // 获取到用户信息
                const userInfo = userInfoRes.userInfo;
                // 调用后端接口使用登录凭证(loginRes.code)和用户信息进行登录处理
                this.code = loginRes[1].code;
                this.doLogin();
                // console.log('用户信息', this.code);
            } catch (er
### 使用 UniApp 实现微信小程序授权登录页面 #### 准备工作 为了实现微信小程序授权登录,在项目初始化阶段需完成必要的准备工作。这包括但不限于注册并认证微信公众平台账号,创建应用以获得 AppID 和 AppSecret 等基本信息[^1]。 #### 授权按钮组件 在页面布局上添加用于触发用户同意授权操作的按钮。此按钮通常会展示给未登录状态下的访问者,点击后可引导至官方提供的 OAuth2.0 认证流程界面: ```html <template> <view class="auth-container"> <!-- 权限请求 --> <button open-type="getUserInfo" @getuserinfo="onGotUserInfo">立即登录</button> </view> </template> <script setup lang="ts"> import { ref } from 'vue'; const onGotUserInfo = (event: any) => { const userInfo = event.detail.userInfo; }; </script> ``` 上述代码片段展示了如何利用 `open-type` 属性指定为 `"getUserInfo"` 的方式来捕获用户的个人信息确认事件,并通过回调函数处理返回的数据对象。 #### 获取临时登录凭证 Code 当用户成功授予权限之后,则可以通过调用 `uni.login()` 方法向微信服务器发起一次匿名身份验证请求,进而得到仅能一次性使用的 code 参数值作为后续换取 access_token 及 openid 的依据之一[^3]: ```javascript // 调用 uni.login() 获取 code async function getCode() { try { let res = await uni.login({ provider: "weixin" }); console.log('login success, code:', res.code); // 将 code 发送到后台接口... } catch(error){ console.error('Failed to get login code', error); } } ``` #### 后台交互逻辑 从前端收集到的 code 应该被及时传递给后端服务端程序以便进一步解析成有效的 session_key 或其他形式的身份令牌。对于 Java 技术栈而言,可能涉及到 Spring Security 组件的应用以及对接 WeChat Open Platform 提供的安全机制来进行最终的身份校验过程[^2]。 #### 完整案例分析 考虑到实际应用场景中的复杂度,建议参考完整的前后端联调方案,确保整个授权链路顺畅无阻的同时也能够妥善保护好敏感数据的安全传输与存储环节。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值