如何在iOS平台Cordova混合应用中实现微信登录认证

Hey there! Let's get your Cordova iOS app's WeChat login sorted out step by step. I'll walk you through fixing your current code, covering essential setup steps, and ensuring the flow is secure and complete.

First, make sure you've installed the official Cordova WeChat plugin correctly (this is required for the Wechat.auth method to work):

cordova plugin add cordova-plugin-wechat --variable WECHAT_APPID=YOUR_WECHAT_APPID

Replace YOUR_WECHAT_APPID with the actual App ID from your WeChat Open Platform account.

You need to set up URL Schemes and permissions for iOS to handle WeChat's redirect:

1. Add URL Scheme
   Add this to your config.xml to auto-configure the URL Scheme in Xcode:

   <platform name="ios">
       <config-file parent="CFBundleURLTypes" target="*-Info.plist">
           <array>
               <dict>
                   <key>CFBundleURLSchemes</key>
                   <array>
                       <string>wxYOUR_WECHAT_APPID</string> <!-- Must start with "wx" + your App ID -->
                   </array>
               </dict>
           </array>
       </config-file>
   </platform>
   

2. Allow WeChat App Queries
   For iOS 9+, add this to config.xml to let your app open the WeChat client:

   <platform name="ios">
       <config-file parent="LSApplicationQueriesSchemes" target="*-Info.plist">
           <array>
               <string>weixin</string>
               <string>weixinULAPI</string>
           </array>
       </config-file>
   </platform>
   

Your current code has a few gaps (missing error handling, incorrect API parameters, and incomplete user info flow). Here's the polished, working version:

$scope.wechatLogin = function() {
    const scope = "snsapi_userinfo"; // Request user info after auth
    const state = "_" + (+new Date()); // Unique state to prevent CSRF
    const appId = "YOUR_WECHAT_APPID"; // Replace with your App ID
    const myappSecret = "YOUR_WECHAT_APPSECRET"; // Replace with your App Secret

    // Check if WeChat plugin is loaded
    if (!window.Wechat) {
        alert("WeChat plugin is not available!");
        return;
    }

    // Initiate WeChat authorization
    Wechat.auth(scope, state, 
        // Success callback for auth
        function(authResponse) {
            console.log("WeChat auth success:", authResponse);
            
            // Exchange code for access token
            const tokenUrl = `https://api.weixin.qq.com/sns/oauth2/access_token?appid=${appId}&secret=${myappSecret}&code=${authResponse.code}&grant_type=authorization_code`;
            
            // Use Angular's $http instead of $.get for consistency
            $http.get(tokenUrl)
                .then(function(tokenRes) {
                    const tokenData = tokenRes.data;
                    
                    // Handle WeChat API errors
                    if (tokenData.errcode) {
                        alert(`Failed to get access token: ${tokenData.errmsg}`);
                        return;
                    }

                    // Fetch user info using access token and openid
                    const userInfoUrl = `https://api.weixin.qq.com/sns/userinfo?access_token=${tokenData.access_token}&openid=${tokenData.openid}&lang=zh_CN`;
                    return $http.get(userInfoUrl);
                })
                .then(function(userRes) {
                    const userData = userRes.data;
                    
                    if (userData.errcode) {
                        alert(`Failed to get user info: ${userData.errmsg}`);
                        return;
                    }

                    // --- Critical Step: Validate with Your Backend ---
                    // Never trust frontend-only login! Send userData (or just openid + access_token) to your backend
                    // Example:
                    // $http.post("/your-api/wechat-login", {
                    //     openid: userData.openid,
                    //     access_token: tokenData.access_token
                    // }).then(function(loginRes) {
                    //     // Handle your app's login success (store token, redirect, etc.)
                    //     alert(`Welcome, ${userData.nickname}!`);
                    // });

                    // For testing, show user info
                    alert(`Login success!\nNickname: ${userData.nickname}\nOpenID: ${userData.openid}`);
                })
                .catch(function(error) {
                    console.error("WeChat login error:", error);
                    alert("Login failed, please try again later.");
                });
        },
        // Error callback for auth
        function(authError) {
            console.error("WeChat auth failed:", authError);
            alert(`Auth failed: ${authError.message || authError}`);
        }
    );
};

To avoid fake login requests, your backend must validate the WeChat access token before creating a user session:

1. Receive the openid and access_token from the frontend
2. Call WeChat's validation API:

   GET https://api.weixin.qq.com/sns/auth?access_token=YOUR_ACCESS_TOKEN&openid=YOUR_OPENID
   

3. If the response returns errcode: 0, the token is valid. Then generate your app's own auth token and return it to the frontend.

• WeChat Open Platform Configuration: Ensure your iOS app's Bundle ID is registered in the WeChat Open Platform, and the App ID/Secret match exactly.
• Testing on Real Devices: WeChat auth won't work on iOS simulators (no WeChat client installed). Always test on a physical device.
• URL Scheme Mistakes: Double-check that your URL Scheme is wx + your App ID (no extra characters or typos).

内容的提问来源于stack exchange，提问作者Nadeeka Fernando