微信公众号开发(与angular框架相结合)

路由配置代码参考:
  //首页
      .state('app.home', {
        url: '/home?code&testopenid',
        templateUrl: 'home/home.html',
        controller: 'HomeController as vm',
        resolve: {
          load: ['$ocLazyLoad', function($ocLazyLoad) {
            return $ocLazyLoad.load(['home/home']);
          }],
          goLogin: ['$stateParams','$state', '$wxService', '$stateParams','$modal',function ($stateParams,$state, $wxService,$stateParams,$modal) {
            return {
                query: function() {
                    var deferred = $q.defer(); 
                    if (typeof $stateParams.code === "string") {
                      $wxService.reLogin($stateParams.code, function(data) {
                        deferred.resolve(data);
                      });
                    } else if (typeof $stateParams.testopenid === "string") {
                      saveToLocalStorage('openid' + appVersion, $stateParams.testopenid);
                      $wxService.memberInfoQuery($stateParams.testopenid, function(data) {
                        deferred.resolve(data);
                      });
                    } else {
                      if (typeof localStorage['openid' + appVersion] === "string") {
                        $wxService.memberInfoQuery(localStorage['openid' + appVersion], function(data) {
                          deferred.resolve(data);
                        });
                      } else {
                        deferred.reject({"status":"40001"});
                      }
                    }
                    return deferred.promise; // 返回承诺,这里并不是最终数据,而是访问最终数据的API  
                  } // end query  
              }
          }]
        }
      })

 

登录验证流程代码参考:
 $wxService.$inject = ['$http', '$window'];

  function $wxService($http, $window) {
    var $service = {
      $$payload: null,
      reLogin: function(_code, callback) {
        for(var key in window.localStorage){ //清除老版本所有localStorage数据
          if(key.indexOf(appVersion) == -1){
            window.localStorage.removeItem(key);
          }
        }
        
        if (localMod) {
          loadLocalData();
          this.memberInfoQuery(localStorage['openid' + appVersion], callback);
          return;
        }
        var self = this;
        if (!localMod) {
          //未登录 尝试重新登陆一遍
          if (!localStorage['openid' + appVersion] || localStorage['openid' + appVersion]=="null") {
            this.ownerInfoQuery(_code, function(data) {
              if (data.openid) {
                saveToLocalStorage('openid' + appVersion, data.openid);
                self.memberInfoQuery(data.openid, callback);
              } else {
                callback(data.openid)
                return;
              }
            });
          } else {
            this.memberInfoQuery(localStorage['openid' + appVersion], callback);
          }
        }
      },
      ownerInfoQuery: function(_code, callback) { //第一次获取openId
        $http({
          url: serviceUrl+'/weixin/openid/query?code='+_code+"&token="+wxToken,
          method: 'get'
        }).success(function(d) {
          callback(d);
        }).error(function(data) {
          callback({
            status: 0,
            msg: JSON.stringify(data)
          })
        });
      },
      memberInfoQuery: function(wxid, callback) {
        callback = callback || function() {};
        $http({
          url: serviceUrl+'/fsServe/checkLogin?wxid='+wxid,
          method: 'get'
        }).success(function(data) {
          callback(data);
        }).error(function(data) {
          debugAlert(JSON.stringify(data));
        });
      }
    };
    return $service;
  }

 

转载于:https://www.cnblogs.com/xmyun/p/6401297.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
微信扫码登录Angular是一种基于微信开放平台提供的二维码扫描技术,在Angular应用中实现场景化认证的过程。这种方式使得用户可以通过微信扫码的方式快速完成身份验证并登录到应用程序中,无需手动输入用户名和密码。 ### 实现步骤: #### 1. 注册微信开放平台账号 首先需要在微信公众平台上注册一个账号,并创建一个小程序或公众号,获取AppID和AppSecret。 #### 2. 配置Angular项目 在Angular项目中引入微信支付和授权的相关依赖库,如`ngx-wechat-login`等。这通常涉及安装相应的npm包。 ```bash # 使用 npm 安装示例 npm install ngx-wechat-login --save ``` #### 3. 引入服务 在 Angular 应用中引入微信登录相关的服务,并注入到需要使用此功能的组件中。 ```typescript import { WechatLoginService } from 'ngx-wechat-login'; constructor(private wechatLoginService: WechatLoginService) {} ``` #### 4. 创建登录功能 在组件中创建微信扫码登录的功能实现。通常包括调用微信登录接口、处理回调结果以及展示加载状态。 ```typescript export class LoginPage { loading = false; constructor(private wechatLoginService: WechatLoginService) {} startWechatLogin() { this.loading = true; // 调用微信登录API,此处假设调用的是wechatLoginService.startLogin() this.wechatLoginService.startLogin().subscribe( (response) => { console.log('成功响应', response); this.handleSuccess(response); }, (error) => { console.error('登录失败', error); this.handleFailure(error); } ); } handleSuccess(data) { // 处理成功的回调数据,可能包含用户信息等 console.log('登录成功', data); // 根据实际情况,可以跳转至主页面或其他操作 } handleFailure(err) { // 处理错误情况 console.log('登录失败', err); } } ``` #### 5. 显示二维码界面 在前端渲染界面中,添加一个按钮触发微信登录请求,然后展示一个二维码供用户扫码。 ```html <button (click)="startWechatLogin()">微信扫码登录</button> <div #qrCode></div> <!-- 添加模板引用 --> <ng-template #qrCode> <!-- 渲染二维码图片 --> <img src="{{ qrCodeUrl }}" alt="二维码"> </ng-template> ``` #### 6. 后端对接 后端需要设置好路由和控制器,用于接收来自微信的回调数据,验证用户身份并返回对应的信息给前端。 #### 7. 用户权限管理 根据用户通过微信登录获得的信息,更新或创建用户的会话状态和相关信息存储于数据库中。 ### 相关问题: 1. **如何优化微信扫码登录的用户体验?** 提高加载速度、简化交互流程、增强安全防护措施、提供反馈提示等都是优化体验的关键点。 2. **Angular中如何处理微信扫码登录的异常情况?** 对应的错误处理逻辑应该覆盖所有可能发生的异常场景,比如网络错误、服务器响应延迟、用户取消扫码等,避免应用崩溃。 3. **为什么选择微信扫码登录而非其他第三方登录方式?** 主要考虑的因素有安全性、用户基数大、易于集成、用户体验良好等。微信作为中国的主流社交软件之一,拥有庞大的用户群体和良好的品牌认知度,适合多种应用场景。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值