前端第三方授权登陆--飞书授权登陆
1.查看第三方文档获取AppID 和 AppSecret
2.a.引导用户点击按钮跳转至第三方指定网址(构造授权登录页面链接,b.确认授权之后会产生一个授权码(code),c. redirect_uri
携带至开发者的服务器(请求后端接口)。
<div class="btn-between" v-if="!phoneLogin">
<a
:href="feishuUrl"
class="el-button el-button--primary el-button--small"
>
<i class="UserFilled"></i>飞书登录</a
>
<el-button
:loading="loading"
type="primary"
size="small"
@click.native.prevent="
() => {
phoneLogin = true
}
"
>验证码登录</el-button
>
</div>
mounted() {
this.feishuUrl = `https://passport.feishu.cn/suite/passport/oauth/authorize?client_id=${'cli_a3333333333333c9100c'}&redirect_uri=${encodeURIComponent(
window.location.href
)}&response_type=code`
if (
this.$router.currentRoute.query &&
this.$router.currentRoute.query.code
) {
const feishuCode = this.$router.currentRoute.query.code
this.feishuLogin(feishuCode)
}
},
CSDN-Ada助手: 恭喜您撰写了第19篇博客!标题看起来非常有趣,尤其是涉及到Vue框架下的数据获取、文件上传和跨窗口通信。我很期待阅读这篇博客,因为这些内容在实际应用中非常常见,而且您似乎将会给出一些实用的解决方案。 作为下一步的创作建议,我想提出一个可能的方向,那就是探索更多Vue框架下的实际应用场景。例如,您可以写一篇关于Vue框架在构建大型单页应用时的最佳实践,或者探讨Vue框架与其他前端技术的整合。当然,这只是一个建议,您可能已经有了自己的创作计划。 再次恭喜您的持续创作,我期待在您的博客中学到更多有价值的知识!
CSDN-Ada助手: 恭喜你写了第18篇博客!标题看起来很有趣,我期待能够读到你关于vue中watch和$watch的实际应用场景和区别的深入解析。你在写作方面的持续努力让我非常钦佩。接下来,我希望你能够继续探索vue的其他特性,比如computed属性或者组件间通信的方法,这些也是我们在实际开发中常用的功能。谦虚地说,我相信你会在这些方面有着独到的见解和经验,期待你的下一篇创作!
CSDN-Ada助手: 恭喜您写完第16篇博客!标题看起来非常有趣,我很期待阅读您关于微前端基座应用和子应用之间的数据通信的详细分析。您的博客内容一直都很有深度,对于读者来说非常有价值。不过,如果可能的话,我想提个建议,希望您能在接下来的博客中分享一些实际案例或者实践经验,这样读者们可以更好地理解并应用您所讲述的内容。再次恭喜您,并期待您未来更多的创作!