简介
@canvuus-internal/mvp0-task-auth 是一个前端使用的 npm 包，它提供了一个方便的方式来实现游戏官方网站和游戏客户端之间的用户认证功能。该包结合了 JSON Web Token (JWT) 和 OAuth 2.0，可以使我们的应用程序仅需一次用户登录，即可获得访问令牌（access token），以访问官方网站和游戏客户端。
本文将介绍如何安装和使用该 npm 包，以及如何配置官方网站和游戏客户端。
安装
可以通过 npm 包管理器安装该包：
npm install @canvuus-internal/mvp0-task-auth
使用
在官方网站中使用
创建认证页面
在官方网站的认证部分，通常需要提供一个表单，让用户输入登录凭据。在用户输入登录凭据之后，发起 POST 请求到认证服务地址，来获取 access token。
<!-- 认证页面 --> <form id="auth-form" action="http://localhost:3000/auth/token" method="post"> <input type="text" name="username" autofocus /> <input type="password" name="password" /> <button type="submit">登录</button> </form>
认证服务配置
服务器需要支持 OAuth 2.0 跨域验证请求。以下是示例设置：
-- -------------------- ---- -------
----- ------- - ------------------
----- ------ - ----------------------
----- -------- - -------------------
----- --- - -----------------------
----- ---- - -------------------------
-- -- ----- --- ---
----- ------ - ---------------------
----------------
--------------------------------- -------- --------- --------- ------ ----- -
-------------- --------- -------- -- ----- -------- ----- ----- -
-- ----- - ------ ---------- -
-- ------- - ------ ---------- ------- -
-- -------- ------------------------------- - ------ ---------- ------- -
----- ------- - - --- --------- --------- ------------- -
----- ----- - ----------------- ------------------------- - ---------- ---- --
------ ---------- ------
--
--
-
-- --------
----- ------ - ----------------
-------------------------- --------------- ----------------------
---------------获取 access token
表单的提交会跳转到认证服务地址，以获取 access token 并保存到 cookie 中。
-- -------------------- ---- -------
-- ----------
----- -------- - ------------------------------------
----------------------------------- ----- -------- ------- -
----------------------
----- -------- - --- ------------------
----- -------------- - -
------- -------
----- --- --------------------------
-------- - --------------- ----------------------------------- -
-
--- -
----- -------- - ----- ---------------------- ---------------
----- ---- - ----- ---------------
--------------------------------- ----------------
------------------------
- ----- ----- -
----------------------- ----
-
--
-- -- ------ ----- - ------
-------- --------------------- ---------- -
----- --------- - --- --------------- - ------------------- - -----
--------------- - ----------------------- ----------------------------------- ---------------- -------
-验证 access token
用户登录后，可以使用 access token 来访问 auth API。可以使用 @canvuus-internal/mvp0-task-auth 提供的 verifyToken 方法来验证 access token。
-- -------------------- ---- ------- ------ - ----------- - ---- ---------------------------------- --- - ----- ----- - -------------------------- ----- ------------- - ----- ------------------ -------------------------- -- - --- ------ --------- ------ - - ----- ----- - ----------------------- ---- -
在游戏客户端中使用
创建认证页面
在客户端中，通常需要提供一个表单，让用户输入登录凭据。在用户输入登录凭据之后，可以使用 @canvuus-internal/mvp0-task-auth 提供的 getAccessToken 方法来获取 access token。
<!-- 认证页面 --> <form id="auth-form"> <input type="text" name="username" autofocus /> <input type="password" name="password" /> <button type="button" id="login-button">登录</button> </form>
获取 access token
在客户端中，可以使用 @canvuus-internal/mvp0-task-auth 提供的 getAccessToken 方法来获取 access token。
-- -------------------- ---- -------
------ - -------------- - ---- ----------------------------------
----- ----------- - ---------------------------------------
------------------------------------- ----- -------- ------- -
----------------------
----- -------- - --- ------------------
----- -------- - ------------------------
----- -------- - ------------------------
--- -
----- - ------------ - - ----- ------------------------ ---------
----------------------------
--------------------------------
- ----- ----- -
----------------------- ----------
-
--
-------- --------------------- -
------------------------------------ ------
-
-------- --------------------------- -
------ ------------------------------------
-验证 access token
在客户端中，可以使用 @canvuus-internal/mvp0-task-auth 提供的 verifyToken 方法来验证 access token。
-- -------------------- ---- ------- ------ - ----------- - ---- ---------------------------------- --- - ----- ----- - --------------------------- ----- ------------- - ----- ------------------ -------------------------- -- - --- ------ --------- ------ - - ----- ----- - ----------------------- ---- -
总结
@canvuus-internal/mvp0-task-auth 可以帮助我们简化认证流程，加强安全性。该 npm 包提供了方便的 API，可以让我们轻松在前端实现用户认证功能。当然，为了正确地使用该 npm 包，我们还需要根据实际情况进行合理的配置和实现。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005601681e8991b448de310