前端开发

关于OAuth2.1 PKCE利用crypto的sha256哈希结果转换base64url计算结果不一致的问题(Flutter)

前言

最近在写第三方flutter app并抓包分析某原生app登录逻辑的时候,遇到了使用OAuth2.1 PKCE授权码模式的登录方式,该模式下需要将code_verifier先进行sha256哈希后再进行base64(URL-Save) 编码成最终的code_challenge。

OAuth2.1 PKCE授权码模式详解:https://shanhy.blog.csdn.net/article/details/114080598

code_verifier转code_challenge的工具:https://tonyxu-io.github.io/pkce-generator/

问题详情

  1. 在对code_verifier进行sha256哈希+base64URL编码后,所得结果与预期的完全不一致;在进行初步对比排查后发现是在base64URL这一步骤出现的差异。
  2. 并且在使用各种线上工具对已经sha256哈希后的字符串进行base64URL编码,也与预期结果完全不一致。


Flutter调用JSON序列化出现type 'String' is not a subtype of type 'MapString, dynamic'

问题情况

本来按照书上的思路都封装好了Dio,半自动生成了Json Model,结果在实际应用上出现了以下异常:

Unhandled Exception: type 'String' is not a subtype of type 'Map<String, dynamic>'


Flutter生成JSON序列化模板报错

问题详情:

在执行flutter packages pub run build_runner build自动生成JSON序列化模板的时候出现了以下报错:

Generator cannot target libraries that have not been migrated to null-safety.
package:flutter_test2/model/recommender.dart:6:7
  ╷
6 │ class Recommender {
  │       ^^^^^^^^^^^
  ╵
[INFO] Running build completed, took 1.0s
[INFO] Caching finalized dependency graph...
[INFO] Caching finalized dependency graph completed, took 41ms
[SEVERE] Failed after 1.1s
pub finished with exit code 1


解决npm install代理报错

前言

最近切换到Windows来写写Vue,拿起以前的项目敲npm install,结果报了代理错误,关掉系统代理后依旧。

Debugger attached.
npm ERR! code ENOTFOUND 
npm ERR! errno ENOTFOUND
npm ERR! network request to https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.3.tgz failed, reason: 
getaddrinfo ENOTFOUND registry.npmjs.org
npm ERR! network This is a problem related to network connectivity.
npm ERR! network
npm ERR! network If you are behind a proxy, please make sure that the
npm ERR! network 'proxy' config is set properly.  See: 'npm help config'


ES6中的Promise

Promise

在ES6中提供了 Promise 对象。

一、概念

  • 在MDN里的解释是(我的翻译可能不太好):Promise对象表示在异步操作下的最终完成(或失败)及其结果值。

The Promise object represents the eventual completion (or failure) of an asynchronous operation, and its resulting value.

  • 说成人话:Promise是一个对象,用来异步操作,在成功执行完毕或者中途失败的时候执行对应(完成或失败)的操作。


vue element-ui 刷新页面后导航菜单不高亮问题

问题详情:

在使用element-ui的NavMenu组件作为导航菜单的时候,我是通过遍历router/index.js里的路由json数组(已定义成常量)来作为NavMenu的渲染数据的。但是我发现刷新页面之后NavMenu就失去了高亮。


Vue封装axios

0 条评论 Vue 前端开发 无标签 月琳

引言:整理项目中有意思的东西

完成文件:request.js、api.js

文件作用:request.js集中配置axios;api.js集中管理后端接口地址

目的:分离后端接口地址和axios参数配置,并集中管理。


微信小程序自定义组件使用外部class

0 条评论 前端开发 无标签 月琳

1. 在组件的js文件里定义一个供外部使用的class名称

Component({
  externalClasses: ['my-class'],


Vue父组件与子组件之间数据的互传

0 条评论 Vue 前端开发 vue 月琳

子组件向父组件传值


JS通过字符串动态获取对象的值和设置动态键名

需求:
  1. 获取(或赋值)json对象其中的某个值,但是这个值的键名是不固定(动态)的
  2. 为json对象创建一个不固定键名(动态键名)的值
实现1:

通过动态键名获取对象的值:
object['键名']
设置方式当然就是:
object['键名'] = '值'