What is OpenID?

OpenID 是一种用于标识用户身份的协议，它允许用户在多个网站上使用同一个用户名和密码。它是由一组标准定义的，包括一个身份提供者（IdP）和一个身份验证服务（AS）。IdP 是网站或服务，它提供用户的身份信息，并将其发送给 AS。AS 是另一个网站或服务，它验证 IdP 发送的身份信息，并确认用户的身份。

OpenID 工作流程

1. 用户选择 OpenID 提供商: 比如 Google/Tencent 或其他支持 OpenID 的服务来管理他们的身份。
2. 用户访问应用网站，点击登录按钮。
3. 重定向到 OpenID 提供商，验证用户身份。
4. 用户认证成功后，OpenID 提供商将用户信息发送给应用网站。
5. 应用网站验证用户信息，确认用户身份。
6. 应用网站允许用户访问受保护的资源。

什么是 Basic Authentication？

Basic Authentication 是一种 HTTP 协议的认证方式，它使用用户名和密码对客户端进行身份验证。
RFC 2617 定义了 Basic Authentication 协议，它规定了客户端如何向服务器发送请求，以及服务器如何验证用户名和密码。
当用户试图访问受保护的资源时，服务器会判断 HTTP Header 中的 Authorization 字段是否包含有效的 Basic Authentication 认证信息。如果没有，服务器会返回 401 Unauthorized 状态码，要求客户端提供认证信息，并在响应头中添加 WWW-Authenticate: Basic 字段。

什么是 JWT？

JWT（JSON Web Token）是一个开放标准（RFC 7519），它定义了一种紧凑且自包含的方式，用于在各方之间安全地传输信息。该信息可以是声明（claim）、有效期、签名或密钥。JWT 可以使用 HMAC 算法或 RSA 算法进行签名。

JWT 自身包含了身份验证所需要的所有信息，因此，我们的服务器不需要存储 Session 信息。这显然增加了系统的可用性和伸缩性，大大减轻了服务端的压力。

可以看出，JWT 更符合设计 RESTful API 时的「Stateless（无状态）」原则 。

Time Picker Pnl in React Native

Why i write this component?
First, I found a lib called @react-native community/picker and wrote my code based on it. When I was done, it worked fine in ios, but when I turned on my android. Oh, my God, it’s not working. This component is platform based. It behaves differently on different platforms.

Then I found another library called react-native-picker, but it was too ugly and not customizable. My UI designer wouldn’t let me use this kind of thing, so I wrote my own component.

Note: This component is not perfect, but it works fine in my work. If you have any suggestion or issue, please let me know. You can build your own component based on this code.
If this code help you, please follow me on Github. XD(am greedy)

Requirements:

• react-native-modal: pop up modal for time picker

Why is this error occurring?

The ERR_OSSL_EVP_UNSUPPORTED error in a React JS application typically arises due to an underlying issue with the version of Node.js and OpenSSL being used. This error is commonly encountered when certain cryptographic algorithms or keys are not supported by the OpenSSL version bundled with the Node.js installation.

How can I fix this error?

Node.js 17 has a new option called –openssl-legacy-provider. This option lets you go back to using the old way of doing things until you can update your code to work with the new rules.

package.json file

1
2
3
4
5

{
  "scripts": {
    "start": "node --openssl-legacy-provider index.js"
  }
}

set environment variable

1

export NODE_OPTIONS=--openssl-legacy-provider

change it in the gradle file

1
2
3

project.ext.react = [
    nodeExecutableAndArgs: ["node", "--openssl-legacy-provider"]
]

change it in the Xcode build settings

1
2
3

buildSettings = {
  NODE_OPTIONS = "--openssl-legacy-provider";
}

After changes, try running the application again. Or you also need to reinstall the dependencies.

1. Make Sure the compileSdkVersion is correct.

Cause if you don’t have the correct version of compileSdkVersion, the Context.RECEIVER_EXPORTED will not found.

1
2
3
4
5
6
7
8
9
10
11
12

buildscript {
  // ...
  ext {
     buildToolsVersion = "***"
     minSdkVersion = ***
     compileSdkVersion = 33
     targetSdkVersion = 34
     ndkVersion = "***"
     googlePlayServicesAuthVersion = "***"
   }
  // ...
}

2. Rewrite the registerReceiver in MainApplication.java

Make sure the registerReceiver is override before the onCreate function.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

// ...
  @Override
  public Intent registerReceiver(@Nullable BroadcastReceiver receiver, IntentFilter filter) {
    if (Build.VERSION.SDK_INT >= 34 && getApplicationInfo().targetSdkVersion >= 34) {
      return super.registerReceiver(receiver, filter, Context.RECEIVER_EXPORTED);
    } else {
      return super.registerReceiver(receiver, filter);
    }
 }

  @Override
  public void onCreate() {
    // some code here
  }
// ...

3. Clean Project and Rebuild the apk package

Reference here: React Native App Crashes — On upgrading to targetSdkVersion 34(Android 14)

Custom Scroll Indicator for ScrollView

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74

import React, { useMemo, useState } from "react"
import { ScrollView, View } from "react-native"

const Demo: React.FC = () => {
  const [contentSize, setContentSize] = useState(0)
  const [scrollViewSize, setScrollViewSize] = useState(0)
  const [scrollPosition, setScrollPosition] = useState(0)

  const indicatorWidth = useMemo(() => {
    if (contentSize > 0 && scrollViewSize > 0) {
      return (scrollViewSize / contentSize) * scrollViewSize
    }

    return 0
  }, [contentSize, scrollViewSize])

  const indicatorPosition = useMemo(() => {
    if (contentSize > 0 && scrollPosition > 0) {
      return (scrollPosition / contentSize) * scrollViewSize
    }

    return 0
  }, [contentSize, scrollPosition, scrollViewSize])

  return (
    <View>
      <ScrollView
        // disable default scroll indicator
        showsHorizontalScrollIndicator={false}
        onLayout={(event) => {
          setScrollViewSize(event.nativeEvent?.layout?.width ?? 0)
        }}
        onContentSizeChange={(w) => {
          setContentSize(w)
        }}
        horizontal // set horizontal scroll
        scrollEventThrottle={16} // throttle scroll event to improve performance
        onScroll={(event) => {
          // change scroll position here
          const { contentOffset } = event.nativeEvent

          const { x = 0 } = contentOffset
          const max = contentSize - scrollViewSize
          const min = 0

          if (x > max) {
            setScrollPosition(max)
          } else if (x < min) {
            setScrollPosition(min)
          } else {
            setScrollPosition(x)
          }
        }}
      >
        {/* Content here */}
      </ScrollView>

      {/* custom scroll indicator */}
      <View
        style={{
          bottom: 0,
          height: 4,
          width: indicatorWidth,
          position: "absolute",
          left: indicatorPosition,
          borderRadius: 4,
          backgroundColor: "#EEEEEE",
        }}
      />
    </View>
  )
}

export default Demo

见证历史了吧

上证指数开盘涨停。

国家这次真算得上破釜成舟了。

就是不知道，半年/多年后回过头来看，这是起大厦的首日，还是倾大厦的首日呢？

不得而知。 楼他们是不打算救了，可以考虑购买房子了。

extends Array

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

class PowerArray extends Array {
  isEmpty() {
    return this.length === 0;
  }

  // filter/map/... 等函数不再传递PowerArray
  static get [Symbol.species] () {
    return Array;
  }
}

let arr = new PowerArray(1, 2, 3);
alert(arr.isEmpty()); // false

let filter_array = arr.filter(i => i > 1);
alert(filter_array.isEmpty()); //Error

什么是 Diamond

Diamond 指的是一种设计模式，称为 EIP-2535 Diamonds。这种模式用于构建可模块化和可升级的以太坊智能合约。

• 模块化架构：Diamond 是一种创建单一、模块化合约（称为 Diamond）的方式，该合约将不同的功能委托给分离的、可互换的合约组件（称为 Facets）。这有助于更好地组织代码和分离关注点。
• Facets：每个 Facet 包含特定的功能，并可以独立升级。例如，一个 Facet 可能处理用户管理，而另一个处理交易。
• Diamond Storage：在 Diamond 模式中，合约的存储结构被设计成可以支持不同 Facets 的升级，而不影响整体合约的其他部分。

对外部世界（如用户界面、其他智能合约和软件/脚本）而言，Diamond 看起来是一个单一的智能合约，具有一个单一的以太坊地址。但在内部，它使用一组称为 Facets 的合约来处理其外部功能，这些 Facets 对外部是隐藏的。