Angular前后端分离项目如何企业微信网页认证

1、想要干什么
在最近的Angular+Sping boot的学习应用中,想要在企业微信获取企业微信用户的userid,完成网页认证。具体可参考企业微信网页认证api
2、企业微信网页认证原理
Angular前后端分离项目如何企业微信网页认证_第1张图片
自己的理解
Angular前后端分离项目如何企业微信网页认证_第2张图片
注意:这里的消费code的过程,必须由服务后台完成请求
3、遇到的坑
我在使用的过程中,试图使用Angular在前端完成身份认证的过程,当时的流程图:
Angular前后端分离项目如何企业微信网页认证_第3张图片
由于在微信开发中,微信内嵌的浏览器并没有控制台让我们打印日志,只知道发生了错误,但具体错误一无所知。试图通过alert方法,将错误的对象打印出来,但看不到错误对象的详细信息。
4、vConsole
可能腾讯早就收到微信开发者的投诉,没有控制台,微信开发出现错误,完全靠猜想自己哪里出了问题,效率太低,于是悄悄的提供了vConsole给开发者调试代码。vConsole是一个虚拟的控制台。
使用方法:在页面的head中加入如下代码


这样我们的页面就会增加一个虚拟的控制台,console.log或其他调试方法均可以在虚拟控制台中展现。
Angular前后端分离项目如何企业微信网页认证_第4张图片
Angular前后端分离项目如何企业微信网页认证_第5张图片
5、结论
通过vConsole调试,得到了问题的关键:出现跨域错误,企业微信的API不允许跨域请求。也就是说消费code的过程中,我使用angular发起get请求是不被允许的,反思之后得出正确的流程图。
Angular前后端分离项目如何企业微信网页认证_第6张图片
补充更正:颁发code的工作实际上是由微信或企业微信客户端完成的,并非企业微信API。

你可能感兴趣的:(angular)