在微信小程序中使用 Cookie
和Web相比，微信小程序有哪些限制？
微信小程序作為一種獨立的應(yīng)用開發(fā)平臺，與傳統(tǒng)的 Web 應(yīng)用相比，存在一些特定的限制和差異。了解這些限制對于在微信小程序中集成身份認證平臺至關(guān)重要。在本節(jié)中，我們將介紹微信小程序相對于 Web 應(yīng)用的主要限制。
以下是一些微信小程序的限制：
運行環(huán)境限制：微信小程序運行在微信客戶端中，無法直接在瀏覽器中訪問。因此，一些基于瀏覽器的功能（如 Cookie 等）在微信小程序中不可用。
網(wǎng)絡(luò)請求限制：微信小程序中的網(wǎng)絡(luò)請求受到嚴格的安全策略限制。只能發(fā)送 HTTPS 請求，且只能訪問特定的域名。這意味著在集成身份認證平臺時，需要確保認證服務(wù)提供商的域名在微信小程序的白名單之中。
文件系統(tǒng)限制：微信小程序具有受限的文件系統(tǒng)訪問權(quán)限。只能訪問小程序自身的文件系統(tǒng)，無法直接讀取用戶本地文件或系統(tǒng)文件。
UI 組件限制：微信小程序提供了一組特定的 UI 組件，相對于 Web 應(yīng)用的 UI 組件更加有限。需要根據(jù)微信小程序的組件庫進行布局和樣式設(shè)計。
代碼運行限制：微信小程序使用的是基于 JavaScript 的開發(fā)語言，但與 Web 應(yīng)用相比，微信小程序的 JavaScript 運行環(huán)境具有一些差異。需要熟悉微信小程序的開發(fā)規(guī)范和限制，以確保身份認證功能的正確實現(xiàn)。
通過自定義 Cookie 存儲對接網(wǎng)絡(luò)請求的 set-cookie
盡管在微信小程序中沒有像瀏覽器那樣的原生 Cookie 存儲，但如果有需要，比如在和身份認證平臺交互過程中，非常需要客戶端有 Cookie 存取功能的話，可以使用自定義的 Cookie 存儲來實現(xiàn)。
好在，不用完全從0開始造輪子，我們可以基于 tough-cookie封閉幾個常用的接口，以便在微信小程序中靈活地讀取和存儲網(wǎng)絡(luò)請求中的 Cookie，不妨將自己封裝的文件命名為 browser-cookie.ts。
規(guī)格說明
我們用一個測試文件說明對 browser-cookie 的使用：
import {Cookie} from "tough-cookie";import * as assert from "assert";import {BrowserCookieStore} from "./browser-cookie";describe('Browser Cookie Store', () => {const sut = new BrowserCookieStore()it('finds cookie', (done) => {sut.findCookie("test", "test", "key", (_err: Error | null, cookie: Cookie | null) => {expect(cookie).toEqual(null);done()});})it('finds cookies', (done) => {sut.findCookies("test", "test", false, (_err: Error | null, cookies: Cookie[] | null) => {expect(cookies).toBeDefined()expect(cookies!.length).toEqual(0)done()});})it('gets all cookies', (done) => {sut.getAllCookies((_err: Error | null, cookies: Cookie[]) => {expect(cookies.length).toEqual(0)done()})})it('puts cookie', (done) => {sut.putCookie(Cookie.parse("foo=bar")!, (err: Error | null) => {expect(err).toEqual(null)sut.getAllCookies((_err, cookies) => {expect(cookies.length).toEqual(1)sut.putCookie(Cookie.parse("joe=doe")!, (err2) => {expect(err2).toEqual(null)sut.getAllCookies((_, allCookies) => {expect(allCookies.length).toEqual(2)})})done()})})})it('removes cookie', (done) => {sut.getAllCookies((_err, cookies) => {expect(cookies.length).toEqual(2)sut.removeCookie('', '', 'foo', (err2) => {expect(err2).toEqual(null)sut.getAllCookies((_, allCookies) => {expect(allCookies.length).toEqual(1)done()})})})})it('removes all cookies', (done) => {sut.getAllCookies((_err, cookies) => {expect(cookies.length).toEqual(1)sut.removeCookies('', '', () => {sut.getAllCookies((_, allCookies) => {expect(allCookies.length).toEqual(0);done();})})})})it('update cookie', (done) => {const cookie = Cookie.parse(`foo=bar`)assert.ok(cookie)sut.putCookie(cookie, () => {sut.getAllCookies((_, allCookies) => {expect(allCookies.length).toEqual(1)expect(document.cookie).toEqual(`foo=bar`)const newCookie = Cookie.parse(`foo=doe`)assert.ok(newCookie)sut.updateCookie(cookie, newCookie, () => {expect(document.cookie).toEqual(`foo=doe`)done()})})})})it('finds cookie without allowSpecialUseDomain', (done) => {const cb = (err, cookies) => {expect(err).toEqual(null)expect(cookies.length).toEqual(0)done()}sut.findCookies('www.zhihu.com', '/api/v3/oauth/captcha', cb)})})
實現(xiàn)
import {Cookie, CookieJar, Store} from "tough-cookie";type FindCookiesCallback = (err: (Error | null), cookie: Cookie[]) => voidexport class BrowserCookieStore implements Store {synchronous: boolean;findCookie(domain: string, path: string, key: string, cb: (err: (Error | null), cookie: (Cookie | null)) => void): void {const decodedCookie = decodeURIComponent(document.cookie)decodedCookie.split(';').forEach(c => {while (c.startsWith(' ')) {c = c.substring(1)}const name = key + '='if (c.startsWith(name)) {cb(null, Cookie.parse(c.substring(name.length, c.length)) ?? null)}});cb(null, null)}findCookies(domain: string, path: string, cb: FindCookiesCallback): voidfindCookies(domain: string, path: string, allowSpecialUseDomain: boolean, cb: FindCookiesCallback): voidfindCookies(domain: string, path: string, allowSpecialUseDomain: boolean | FindCookiesCallback, cb?: FindCookiesCallback): void {if (!cb) {cb = allowSpecialUseDomain as FindCookiesCallback}const decodedCookie = decodeURIComponent(document.cookie)const cookies: Cookie[] = []decodedCookie.split(';').forEach(c => {const cookie = Cookie.parse(c)if (cookie) {if (domain && path) {if (cookie.domain === domain && cookie.path === path) {cookies.push(cookie)}} else {cookies.push(cookie)}}})cb(null, cookies)}getAllCookies(cb: (err: (Error | null), cookie: Cookie[]) => void): void {this.findCookies('', '', false, cb)}putCookie(cookie: Cookie, cb: (err: (Error | null)) => void): void {console.log('put cookie = ', cookie);document.cookie = cookie.toString()cb(null)}removeCookie(domain: string, path: string, key: string, cb: (err: (Error | null)) => void): void {this.getAllCookies((_, allCookies) => {allCookies.forEach(c => {if (c.key === key) {document.cookie = `${c.key}=${c.value};max-age=0;`}})cb(null)});}removeCookies(domain: string, path: string, cb: (err: (Error | null)) => void): void {this.getAllCookies((_, allCookies) => {allCookies.forEach(c => {document.cookie = `${c.key}=${c.value};max-age=0`})cb(null)})}updateCookie(oldCookie: Cookie, newCookie: Cookie, cb: (err: (Error | null)) => void): void {this.removeCookie('', '', oldCookie.key, () => {this.putCookie(newCookie, () => {cb(null)})})}}const cookieStore = new BrowserCookieStore()cookieStore.synchronous = true;export const getCookieStore = () => {return cookieStore}export const clearCookieStore = () => {cookieStore.removeCookies('', '', () => {})return cookieStore}export const getCookieJar = () => {return new CookieJar(cookieStore)}
實際用途
很多網(wǎng)站的登錄狀態(tài)都依賴 Cookie，通過在微信小程序里利用網(wǎng)站 cookie，就可以實現(xiàn)從微信小程序和網(wǎng)站共享登錄狀態(tài)，有一種跨越設(shè)備的單點登錄效果。
評論
圖片
表情