- 彈出新窗口（window.open）

- 重定向方式 (location.href)

第一種體驗較好，第二種需要是因為環(huán)境有別，如 iOS Chr" />

国产成人精品无码青草_亚洲国产美女精品久久久久∴_欧美人与鲁交大毛片免费_国产果冻豆传媒麻婆精东

15158846557 或 在線咨詢 在線咨詢
15158846557 或 在線咨詢
所在位置： 首頁 > 營銷資訊 > 網(wǎng)站運營 > 知乎網(wǎng)站 OAuth 登錄彈窗是怎么設計的？

知乎網(wǎng)站 OAuth 登錄彈窗是怎么設計的？

時間：2024-02-12 06:30:01 | 來源：網(wǎng)站運營

時間：2024-02-12 06:30:01 來源：網(wǎng)站運營

知乎網(wǎng)站 OAuth 登錄彈窗是怎么設計的？：ng-click 能觸發(fā)打開。你可能需要同時支持兩種方式的 oauth 注冊：

- 彈出新窗口（window.open）

- 重定向方式 (location.href)

第一種體驗較好，第二種需要是因為環(huán)境有別，如 iOS Chrome 當前有兩個 bug：

- window.open 打開的子窗口中，opener 為 null

- CSP 除非設定為 `frame-src *`，window.open 才能成功打開窗口（由于第一個 bug 存在，這里無意義）

重定向方式的注冊稍微需要多處理一些信息：

以查詢變量傳遞當前頁地址和回調(diào)地址 -> 服務器通過 cookie 保存起始地址 -> 回調(diào)頁面讀取并清除起始地址 cookie，根據(jù)情況再設置 cookie 表示注冊待續(xù) -> 注冊頁恢復注冊，并清除 cookie。

另外，窗口間通訊的接口在此能通過返回值進行一點點互動，比如刷新頁面或跳轉(zhuǎn)。

補充點腳本容易理解：

起始頁：

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)回調(diào)頁：

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

版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。

為了最佳展示效果，本站不支持IE9及以下版本的瀏覽器，建議您使用谷歌Chrome瀏覽器。 點擊下載Chrome瀏覽器
關閉