uniapp开发App一键登录:从技术选型到前后端落地实战--2秒登录,流失率减半:在uni里接入一键登录的全过程

<template>  <viewclass="login-container">    <viewclass="login-title">一键登录</view>    <button      v-if="showUniLogin"       class="uni-login-btn"       @click="handleUniLogin"    >      本机号码一键登录    </button>    <viewclass="other-login">      <text @click="showSmsLogin">短信验证码登录</text>    </view>  </view></template><script>export default {  data() {    return { showUniLogin: false };  },  mounted() {    this.checkPreLogin();  },  methods: {    // 1. 预登录检查（仅App端生效）    checkPreLogin() {      // #ifdef APP-PLUS      uni.preLogin({        provider: 'univerify',        success: () => { this.showUniLogin = true; },        fail: () => { this.showUniLogin = false; }      });      // #endif      // #ifdef MP-WEIXIN      this.showUniLogin = true; // 小程序端直接显示      // #endif    },    // 2. 核心一键登录    handleUniLogin() {      uni.showLoading({ title: '登录中...' });      uni.login({        provider: 'univerify',        // #ifdef APP-PLUS        univerifyStyle: {          fullScreen: false,          backgroundColor: '#ffffff',          button: { backgroundColor: '#07c160', title: '本机号码一键登录' }        },        // #endif        success: (res) => {          uni.hideLoading();          const { openid, access_token } = res.authResult;          // 调用后端登录接口          this.loginByToken(openid, access_token);        },        fail: (err) => {          uni.hideLoading();          if (err.errCode !== 1001) { // 1001为用户取消            uni.showToast({ title: '登录失败，请重试', icon: 'none' });          }        }      });    },    // 3. 调用SpringBoot后端    async loginByToken(openid, access_token) {      const res = await uni.request({        url: `${this.$baseUrl}/api/auth/univerify-login`,        method: 'POST',        data: { openid, accessToken: access_token }      });      if (res.data.code === 0) {        uni.setStorageSync('token', res.data.data.token);        // #ifdef APP-PLUS        uni.closeAuthView(); // App端需手动关闭授权页        // #endif        uni.reLaunch({ url: '/pages/index/index' });      }    }  }};</script>

<!-- pom.xml 添加 --><dependency>    <groupId>org.springframework.boot</groupId>    <artifactId>spring-boot-starter-web</artifactId></dependency><dependency>    <groupId>io.jsonwebtoken</groupId>    <artifactId>jjwt</artifactId>    <version>0.9.1</version></dependency>

@RestController@RequestMapping("/api/auth")@Slf4jpublic class AuthController {    @Autowired    private UniVerifyLoginService loginService;    @PostMapping("/univerify-login")    public Result<?> loginByUniVerify(@RequestBodyUniVerifyLoginRequest request) {        // 1. 调用云函数换取手机号        String phoneNumber = loginService.getPhoneNumber(            request.getAccessToken(),             request.getOpenid()        );        // 2. 执行业务登录/注册        String token = loginService.handleLogin(phoneNumber);        return Result.success(token);    }}

@Service@Slf4jpublic class UniVerifyLoginService {    @Autowired    private RestTemplate restTemplate;    // 从配置文件读取uniCloud云函数URL化后的地址    @Value("${univerify.cloud-function-url}")    private String cloudFunctionUrl;    /**     * 调用uniCloud云函数换取真实手机号     */    public String getPhoneNumber(String accessToken, String openid) {        Map<String, Object> request = new HashMap<>();        request.put("access_token", accessToken);        request.put("openid", openid);        // 调用云函数（云函数内部使用 uniCloud.getPhoneNumber）        ResponseEntity<Map> response = restTemplate.postForEntity(            cloudFunctionUrl,             request,             Map.class        );        if (response.getStatusCode() == HttpStatus.OK && response.getBody() != null) {            Map body = response.getBody();            if (Objects.equals(body.get("code"), 0)) {                return (String) body.get("phoneNumber");            }        }        throw new BusinessException("换取手机号失败");    }    /**     * 处理登录/注册业务     */    public String handleLogin(String phoneNumber) {        User user = userService.findByPhone(phoneNumber);        if (user == null) {            user = userService.registerNewUser(phoneNumber);        }        // 生成JWT Token        return jwtTokenProvider.generateToken(user.getId(), user.getPhone());    }}

// uniCloud云函数：univerify-exchange'use strict';exports.main = async (event, context) => {    const { access_token, openid } = event;    // 使用uniCloud内置接口换取手机号    const res = await uniCloud.getPhoneNumber({        provider: 'univerify',        access_token: access_token,        openid: openid    });    // 返回手机号给SpringBoot    return {        code: 0,        phoneNumber: res.phoneNumber    };};