15158846557 在线咨询 在线咨询
15158846557 在线咨询
所在位置: 首页 > 营销资讯 > 网站运营 > 知乎网站 OAuth 登录弹窗是怎么设计的?

知乎网站 OAuth 登录弹窗是怎么设计的?

时间:2024-02-12 06:30:01 | 来源:网站运营

时间:2024-02-12 06:30:01 来源:网站运营

知乎网站 OAuth 登录弹窗是怎么设计的?:ng-click 能触发打开。你可能需要同时支持两种方式的 oauth 注册:

- 弹出新窗口(window.open)

- 重定向方式 (location.href)

第一种体验较好,第二种需要是因为环境有别,如 iOS Chrome 当前有两个 bug:

- window.open 打开的子窗口中,opener 为 null

- CSP 除非设定为 `frame-src *`,window.open 才能成功打开窗口(由于第一个 bug 存在,这里无意义)

重定向方式的注册稍微需要多处理一些信息:

以查询变量传递当前页地址和回调地址 -> 服务器通过 cookie 保存起始地址 -> 回调页面读取并清除起始地址 cookie,根据情况再设置 cookie 表示注册待续 -> 注册页恢复注册,并清除 cookie。

另外,窗口间通讯的接口在此能通过返回值进行一点点互动,比如刷新页面或跳转。

补充点脚本容易理解:

起始页:

app.factory 'oauth', ($window, domainConfig) -> register: (serviceName) -> callbckUrl = '/oauth/callback' urls = qq: "#{domainConfig.qqOAuthUrl}?next=#{callbckUrl}" sina: "#{domainConfig.sinaOAuthUrl}?next=#{callbckUrl}" ua = navigator.userAgent iOSChrome = /Mobile/.test(ua) and /CriOS/.test(ua) url = urls[serviceName] supportsWindowOpen = not iOSChrome if supportsWindowOpen $window.open url else $window.location.href = url + '&from=' + encodeURIComponent($window.location.href)回调页:

var setUnfinished = function() { document.cookie = 'accountcallback=' + '{{encodedJSON}}' + '; path=/'} if (window.opener) { document.write(signedin ? '...' : '...') if (signedin) { opener.myApp.crossDomainMessage('accountcallback', accinfo) } else if (snsinfo) { var finished = opener.myApp.crossDomainMessage('accountcallback', snsinfo) if (finished === false) { setUnfinished() opener.location.href = '/?next=' + opener.location.href } } setTimeout(window.close, 500)} else { var url = '/' if (from) { if (signedin) { location.href = from return } else { url += '?next=' + from } } if (!signedin && snsinfo) { setUnfinished() } location.href = url}

关键词:设计

74
73
25
news

版权所有© 亿企邦 1997-2025 保留一切法律许可权利。

为了最佳展示效果,本站不支持IE9及以下版本的浏览器,建议您使用谷歌Chrome浏览器。 点击下载Chrome浏览器
关闭