uniapp 苹果app，实现微信授权登录

在使用 UniApp 开发苹果 APP 时，实现微信授权登录需要前端和后端的配合。前端使用 JavaScript 与微信 SDK 进行交互，而后端使用 Java 处理微信授权登录的具体逻辑。以下是实现微信授权登录的详细代码和注释。

前端代码（UniApp）

首先，我们需要集成微信 SDK，并配置微信应用的相关信息。

1. 在微信开发者平台配置应用

   • 获取 AppID 和 AppSecret。
   • 配置授权回调域名。

2. 在 UniApp 中引入微信 SDK

   // 引入微信SDK
   import Weixin from 'weixin-js-sdk';
   

3. 在前端进行微信授权登录

   // 调用微信授权登录接口
   function wechatLogin() {
       Weixin.login({
           success(res) {
               if (res.code) {
                   // 通过code获取用户信息
                   getWechatUserInfo(res.code);
               } else {
                   console.log('登录失败！' + res.errMsg);
               }
           }
       });
   }
   
   // 通过code获取用户信息
   function getWechatUserInfo(code) {
       uni.request({
           url: 'https://your-backend-api.com/wechatLogin',
           method: 'POST',
           data: {
               code: code
           },
           success(res) {
               if (res.data.success) {
                   // 保存用户信息
                   saveUserInfo(res.data.userInfo);
               } else {
                   console.log('获取用户信息失败！');
               }
           },
           fail(err) {
               console.log('请求失败', err);
           }
       });
   }
   
   // 保存用户信息
   function saveUserInfo(userInfo) {
       uni.setStorageSync('userInfo', userInfo);
       uni.showToast({
           title: '登录成功',
           icon: 'success'
       });
   }
   
   // 调用微信登录
   wechatLogin();
   

后端代码（Java）

后端需要接收前端传递的 code，并使用 AppID 和 AppSecret 请求微信服务器获取 access_token 和用户信息。

引入所需的依赖

在 pom.xml 文件中添加微信 SDK 的依赖：

<dependency>
    <groupId>com.github.binarywang</groupId>
    <artifactId>weixin-java-mp</artifactId>
    <version>4.1.0</version>
</dependency>

配置微信开发者信息

@Configuration
public class WxMpConfig {
    @Value("${wechat.appid}")
    private String appId;

    @Value("${wechat.secret}")
    private String appSecret;

    @Bean
    public WxMpService wxMpService() {
        WxMpDefaultConfigImpl config = new WxMpDefaultConfigImpl();
        config.setAppId(appId);
        config.setSecret(appSecret);
        WxMpService wxMpService = new WxMpServiceImpl();
        wxMpService.setWxMpConfigStorage(config);
        return wxMpService;
    }
}

实现微信授权登录接口

@RestController
@RequestMapping("/wechat")
public class WechatController {
    @Autowired
    private WxMpService wxMpService;

    @PostMapping("/login")
    public ResponseEntity<Map<String, Object>> wechatLogin(@RequestBody Map<String, String> params) {
        String code = params.get("code");
        Map<String, Object> result = new HashMap<>();

        try {
            WxMpOAuth2AccessToken accessToken = wxMpService.oauth2getAccessToken(code);
            WxMpUser user = wxMpService.oauth2getUserInfo(accessToken, null);

            // 将用户信息存储到数据库
            User userInfo = saveUser(user);

            result.put("success", true);
            result.put("userInfo", userInfo);
            return ResponseEntity.ok(result);
        } catch (WxErrorException e) {
            e.printStackTrace();
            result.put("success", false);
            result.put("message", "登录失败");
            return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).body(result);
        }
    }

    private User saveUser(WxMpUser wxUser) {
        // 实现将微信用户信息存储到数据库的逻辑
        User user = new User();
        user.setOpenId(wxUser.getOpenId());
        user.setNickname(wxUser.getNickname());
        user.setAvatar(wxUser.getHeadImgUrl());
        // TODO: 保存用户到数据库
        return user;
    }
}

代码详解

前端代码详解

1. 微信 SDK 的引入与登录

   import Weixin from 'weixin-js-sdk';
   
   function wechatLogin() {
       Weixin.login({
           success(res) {
               if (res.code) {
                   getWechatUserInfo(res.code);
               } else {
                   console.log('登录失败！' + res.errMsg);
               }
           }
       });
   }
   

           引入微信 SDK，并调用 Weixin.login 方法进行微信登录。成功登录后，会返回一个 code，我们将其传递给后端以获取用户信息

2. 获取微信用户信息

   function getWechatUserInfo(code) {
       uni.request({
           url: 'https://your-backend-api.com/wechatLogin',
           method: 'POST',
           data: {
               code: code
           },
           success(res) {
               if (res.data.success) {
                   saveUserInfo(res.data.userInfo);
               } else {
                   console.log('获取用户信息失败！');
               }
           },
           fail(err) {
               console.log('请求失败', err);
           }
       });
   }
   

   将 code 传递给后端，并通过 uni.request 请求后端接口获取用户信息。

3. 保存用户信息

   function saveUserInfo(userInfo) {
       uni.setStorageSync('userInfo', userInfo);
       uni.showToast({
           title: '登录成功',
           icon: 'success'
       });
   }
   
   wechatLogin();
   

   将获取到的用户信息保存到本地存储中，并显示登录成功的提示。

后端代码详解

1. 配置微信开发者信息

   @Configuration
   public class WxMpConfig {
       @Value("${wechat.appid}")
       private String appId;
   
       @Value("${wechat.secret}")
       private String appSecret;
   
       @Bean
       public WxMpService wxMpService() {
           WxMpDefaultConfigImpl config = new WxMpDefaultConfigImpl();
           config.setAppId(appId);
           config.setSecret(appSecret);
           WxMpService wxMpService = new WxMpServiceImpl();
           wxMpService.setWxMpConfigStorage(config);
           return wxMpService;
       }
   }
   

   使用 @Configuration 注解配置微信开发者的 AppID 和 AppSecret。

2. 实现微信授权登录接口

   @RestController
   @RequestMapping("/wechat")
   public class WechatController {
       @Autowired
       private WxMpService wxMpService;
   
       @PostMapping("/login")
       public ResponseEntity<Map<String, Object>> wechatLogin(@RequestBody Map<String, String> params) {
           String code = params.get("code");
           Map<String, Object> result = new HashMap<>();
   
           try {
               WxMpOAuth2AccessToken accessToken = wxMpService.oauth2getAccessToken(code);
               WxMpUser user = wxMpService.oauth2getUserInfo(accessToken, null);
   
               User userInfo = saveUser(user);
   
               result.put("success", true);
               result.put("userInfo", userInfo);
               return ResponseEntity.ok(result);
           } catch (WxErrorException e) {
               e.printStackTrace();
               result.put("success", false);
               result.put("message", "登录失败");
               return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).body(result);
           }
       }
   
       private User saveUser(WxMpUser wxUser) {
           User user = new User();
           user.setOpenId(wxUser.getOpenId());
           user.setNickname(wxUser.getNickname());
           user.setAvatar(wxUser.getHeadImgUrl());
           // TODO: 保存用户到数据库
           return user;
       }
   }
   

   创建微信登录接口，接收前端传递的 code。使用 wxMpService.oauth2getAccessToken(code) 获取 access_token。使用 wxMpService.oauth2getUserInfo(accessToken, null) 获取微信用户信息。将用户信息保存到数据库，并返回给前端。

通过上述步骤，你可以在 UniApp 开发的苹果应用中实现微信授权登录功能。