nodejsの二次元コードスキャン-両替自動照合を実現します.

34878 ワード
nodejs
nodejs二次元コードスキャン—両替自動照合を実現します.
  • 背景
  • 概略実装
  • 開発環境
  • 依存症
  • マイクロクレジットのウェブページのライセンス
  • 第一歩:ユーザーが授権に同意し、コード
    • を取得する.
  • 第二ステップ:codeを通じてウェブページを交換してaccess_を授権します.token
  • 第3ステップ:ユーザ情報を引く(scopeがsnsaphiuuserinfoである必要がある)
  • ドラックコード
  • 第1ステップクライアント要求
  • 第2ステップバックグラウンドは、第1ステップ分のタグのsrc要求
    • を受信する.
  • 第3段階のバックグラウンドは、WeChatウェブページの許可のコールバック
    • を受信する.
  • 注意
    • 背景
    この文章は主に、掃符号器がない場合にどのユーザが掃走査を用いているかを識別するための二次元コードを実現するためである.設計の由来:主に会社のプロジェクトの機能は、クーポンのような為替コードを二次元コードに生成した後、ユーザーは二次元コードを商店に展示し、商店が二次元コードをスキャンして照合します.このように関連するどのように判断するかは、一般のユーザーがスキャンしたものではなく、事業体がスキャンしたものですか?
    概観を実現する
    ユーザーがクーポンをクリックすると、対応する二次元コード(該当商品の情報付き)->ユーザー/取引先が二次元コードをスキャンします.WeChatページのライセンスを行います.(両替情報などの一般情報のみ表示)
    開発環境
    1.nodejs
    依存関係
    1.Qr-inmage(実はまだユーザー数が多いnode-qrcodeがありますが、本機能の実現が煩雑なので、小衆のqr-mageを選択しました.):主に二次元コードを動的に表示するために、バックグラウンドで二次元コード画像を保存する必要がありません.2.WeChatページのライセンス:どのユーザがスキャンしたかを識別するための二次元コードです.
    WeChatのホームページのライセンス
    第一歩:ユーザーが授権に同意し、コードを取得する
    WeChat公衆アカウントがライセンススコープ(scopeパラメータ)の権限を持っていることを確認した上で(サービス番号が高度なインターフェースを獲得した後、デフォルトではscopeパラメータの中のsnsapeiとsnsaphiuuserinfoを保有しています)、注目者に次のページを開くように案内します.
    https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect 「このリンクはアクセスできません.」と表示されたら、パラメータが間違っているかどうかを確認してください.scopeパラメータに対応する権限を持っていますか?(WeChatを自分のルートに戻したい時に自分のパラメータを持っています.コールバックルートに自分のパラメータを追加して、url符号化を行います.これで自分のパラメータを持って帰ってきます.具体的には下を見て実現できます.)
    第二ステップ:codeを通じてウェブページを交換してaccesst tokenを授権します.
    まず注意してください.ここでcodeを通じて交換したのは特殊なウェブページのライセンスaccessatokenであり、基本的なサポートのaccesstokenであります.異なっています.公式アカウントは次のインターフェースを通じてウェブページのライセンスaccessautkenを取得できます.ウェブページのライセンスの役割領域がsnsapi ubaseであれば、このステップでウェブページのライセンスaccessatokenを取得するとともに、openidを取得しました.snsapiスタイルのウェブページのライセンスプロセスはここで終了します.
    特に、公衆番号のsecretと取得したaccessatokenのセキュリティレベルは非常に高いので、サーバのみに保存し、クライアントに転送することはできません.accessatokenの更新、ユーザー情報の取得などの手順もサーバから開始しなければなりません.
    請求方法
    コードを取得した後、以下のリンクにaccessatokenを取得してください.https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code
    ステップ3:ユーザ情報を引き出す(scopeがsnsaphiuuserinfoである必要がある)
    ウェブページのライセンスのスコープがsnsaphiuuserinfoの場合、開発者はaccessonとopenidを通じてユーザー情報を引き出すことができます.
    請求方法
    http:GET(httpsプロトコルを使用してください.)https://api.weixin.qq.com/sns/userinfo?access_token=ACCESS_TOKEN&openid=OPENID&lang=zh_CN
    この呼び出しは、主として、ユーザの詳細情報を取得して、バックグラウンドのチェックに用い、自分のバックグラウンドの中の取引先かそれとも普通のユーザかを識別するためである.
    ドライコード
    第一歩クライアント要求
    //bms.js
router.get("/QRcode",BMSServer.qrcode);
//bmsserver.js
//               
qrcode:function(req,res){
	let pid=req.body.pid;//         （    ID）
    res.render(renderPath+'qrcode',{pid:pid});
},
//qrcode.ejs
<!DOCTYPE html>
<html>

      <head>
        <link rel='stylesheet' href='/stylesheets/style.css'/>
      </head>
      
      <body> 
      <h1 style="position:absolute;left:43%;top:5%">      </h1>
      <img src="/Data/create_qrcode?url=https://xxxx.xxxxx.xxxx/xxx/qrcodeInfo&pid=" style="width: 100%;height:100%;margin-top:10%"/>
      </body>
        

</html>
    第二のステップバックグラウンドは、第一歩のタグのsrc要求を受信する.
    //1. img   src  create_qrcode       
//data.js
router.get("/create_qrcode",DataServer.create_qrcode);
//dataserver.js
create_qrcode:function(req,res){
     var url = req.query.url;//img  src        
     var pid=req.query.pid;
     let text=`${url}?pid=${pid}`;
     try {
       //text="  ";
       var img = qr.image(text,{size :10});//            ，        qrcodeInfo  
       res.writeHead(200, {'Content-Type': 'image/png'});
       img.pipe(res);
   
     } catch (e) {
       res.writeHead(414, {'Content-Type': 'text/html'});
       res.end('
    414 Request-URI Too Large
    '    );
   
     }
},
//2.       
//bms.js
//                
router.get("/qrcodeInfo",BMSServer.qrcodeInfo);
//bmsserver.js
qrcodeInfo:function(req,res){
     let pid=req.query['pid'];
     res.render(renderPath+'qrcodeInfo',{pid:pid,title:"   "});
},
//qrcodeInfo.ejs
//        
<html>
        <head>
        
          <title><%=title%></title>
        
          <link rel='stylesheet' href='/stylesheets/style.css'/>
          <script src="/js/jquery.js"></script>
          <script src="/js/jquery.mCustomScrollbar.concat.min.js"></script>
          <link href="http://fonts.googleapis.com/css?family=Oxygen|Marck+Script" rel="stylesheet" type="text/css">
          <link href="/css/bootstrap.css" rel="stylesheet">
          <link href="/css/font-awesome.css" rel="stylesheet">
          <link href="/css/admin.css" rel="stylesheet">
          <script src="/js/jquery.min.js"></script>
          <script src="/js/bootstrap.js"></script>
          <script src="/js/excanvas.min.js"></script>
          <script src="/js/jquery.flot.min.js"></script>
          <script src="/js/jquery.flot.resize.js"></script>
        
        </head>
        <script>
        (function($){
		$(window).load(function(){//             ，      
			
            let pid=$("#pid").val();
            let newUrl=escape(`https://xxxx.xxxxx.xxx/xxx/webLogin?pid=${pid}`);//  url  
            location.href="https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxd53d8ea8fc7e67cb&redirect_uri="+newUrl+"&response_type=code&scope=snsapi_base&state=123#wechat_redirect";//          
            
        });
        })(jQuery);
    </script>
        <body>
       <input type="text" value="" id="pid" style="display: none">
    </body>
        
</html>
    第三段階のバックグラウンドは、WeChatのウェブページに許可されたコールバックを受信する.
    //bms.js
router.get("/webLogin",BMSServer.weblogin);//      
//bmsserver.js
weblogin:function(req,res){
        let body=isAvailableData(req.query).data;
        let code=body.code;//       code    access_token
        let state=body.state;
        let pid=body.pid;//                       
        request('https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code='+code+'&grant_type=authorization_code ', async function(error,respone,body){
            if(!error&&respone.statusCode==200){
                 var wxData = JSON.parse(body);
                console.log(wxData)
                let access_token=wxData.access_token;//     access_token
                let openid=wxData.openid;//     openid，               ，         ，        ：
                request("https://api.weixin.qq.com/sns/userinfo?access_token="+access_token+"&openid="+openid+"&lang=zh_CN ",async function(error,respone,body){
                    if(!error&&respone.statusCode==200){
                        let userInfo = JSON.parse(body);//           
                        console.log(userInfo)
                        let qrcodeUser=new QrCodeUser();//        model
                        let qrcodeuser=await qrcodeUser.findQrCodeUserByOpenid(userInfo.openid);//   openid         
                        let title="";
                        if(qrcodeuser==null){
                            title="       ";
                            res.render(renderPath+'webLoginPage',{title:title,userInfo:null,msg:cdkey});
                            
                        }else{
                        	//           
                            title="      ";
                            res.render(renderPath+'webLoginPage',{title:title,userInfo:"hahah",msg:"    "});
                     }     
                }
            });          
        }
    });
}
//webLoginPage.ejs
//weui:           ui。    ：https://www.w3cschool.cn/weixinkaifawendang/k72f1qe4.html
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,viewport-fit=cover">
    <title>  </title>
    <link rel="stylesheet" href="/weui/dist/style/weui.css"/>
    <link rel="stylesheet" href="/weui/dist/example/example.css"/>
</head>
<body ontouchstart>
    <%if(userInfo!=null){%>
        <%=title%>:        <%=msg%>
    <%}else{%>
        <%=title%>:       <%=msg%>
    <%}%>
</body>
</html>
    注意
    二次元コードをスキャンする時は、WeChatのスキャンを使ってください.他のスキャンツールを使うと、WeChatクライアントを使って開くなどの情報が提示されます.
    より良い解決策を提案することを歓迎します.
    webpack+vueページ構築概要