The reason

They say needs come from life why do I have such a weird need? Here’s a story.

In order to save fees navigation walked three kilometres yesterday to find a more icbc ATM machine (can’t poor) then arrived found inside the people’s park, ATM machine into the epidemic to pass now, can’t a face of helpless and then walked 2 km to find a can be used, the card inserted, enter the amount and then click the withdrawals thought all goes well, Suddenly a message popped up on the screen indicating that the card could not do this kind of transaction.

What if you need my phone code
Steal to smile

Carrying two cell phones in my pocket every day is a little cumbersome, so I have a need to send text messages directly to my main cell phone. Let’s go.

Realize the effect drawing

Get into the business

Since I want to do SMS forwarding, THE first thing I think of is Android(because Android is relatively open and everything can be obtained without various restrictions of IOS), I found that I need to use native code to achieve it.

After all, as we are front-end, we should not use pure Native things. Previously, we wrote a small function with Flutter, which is ok. Now about 100 people still use it.

The first thing we need to consider is SMS forwarding. We need to monitor the arrival of SMS and process it through our server.

The react-native Android-sms-listener library can be implemented, but several problems are found.

  1. The listener is no longer implemented after exiting the background.It doesn't work if the program stays in the foreground all the time)
  2. In the process of testing, the first long and short letters were divided into several paragraphs in inconsistent order so that the transfer effect was very poor
  3. No SMS reception time (Although you can use the current time instead)
  4. I have it on my phone2I don’t know which card it’s from

React-native – Android – SMS – Listener2 the main file is smsReceiver.java.

The main logic of the client is to see whether there is a binding wechat through the device Id, and there is no binding of two-dimensional code.

import React, {useState, useEffect} from 'react';
import {StyleSheet, View, Text, PermissionsAndroid} from 'react-native';

import SmsListener from 'react-native-android-sms-listener2';
import {getUniqueId} from 'react-native-device-info';
import QRCode from 'react-native-qrcode-svg';

import axios from 'axios';

axios.defaults.baseURL = 'https://service.wx.hengkx.com';

axios.interceptors.response.use(
  response= > response.data,
  error => Promise.reject(error.response.data),
);

async function requestReadSmsPermission() {
  try {
    var granted = await PermissionsAndroid.request(
      PermissionsAndroid.PERMISSIONS.READ_SMS,
      {
        title: 'Read text messages'.message: 'Need access to text messages',});if (granted === PermissionsAndroid.RESULTS.GRANTED) {
      granted = await PermissionsAndroid.request(
        PermissionsAndroid.PERMISSIONS.RECEIVE_SMS,
        {
          title: 'Receive SMS'.message: 'Need permission to receive SMS messages',});if (granted === PermissionsAndroid.RESULTS.GRANTED) {
        console.log('RECEIVE_SMS permissions granted', granted);
      } else {
        console.log('RECEIVE_SMS permissions denied'); }}else {
      console.log('sms read permissions denied'); }}catch (err) {
    console.log(err); }}const App: (a)= > React$Node = (a)= > {
  const [url, setUrl] = useState();
  const [openId, setOpenId] = useState();
  useEffect((a)= > {
    requestReadSmsPermission();
    axios
      .get('/api/account/info', {params: {deviceId: getUniqueId()}})
      .then(res= > {
        if (res.code === 0) {
          if (res.data.url) {
            setUrl(res.data.url);
            const interval = setInterval(async() = > {const {data} = await axios.get('/api/account/check', {
                params: {deviceId: getUniqueId()},
              });
              if(data) { setUrl(); setOpenId(data.openId); clearInterval(interval); }},1000);
          } else{ setOpenId(res.data.openId); }}}); SmsListener.addListener(message= > {
      if (openId) {
        axios.post('/api/sms/receive', {
          ...message,
          openId,
          tel: message.originatingAddress,
          content: message.body, }); }}); }, [openId, setUrl]);return( <> <View style={styles.qrCodeContainer}> {url && ( <> <QRCode value={url} size={200} bgColor="purple" fgColor="white" / > < Text style = {styles. QrCodeTip} > WeChat scan qr code binding < / Text > < / a >)} {openId && < Text > has been opened for you automatically SMS messages < / Text >} < / View > < / a >). }; const styles = StyleSheet.create({ qrCodeContainer: { flexDirection: 'column', alignItems: 'center', flex: 1, justifyContent: 'center', }, qrCodeTip: { marginTop: 10, }, }); export default App;Copy the code

The source code

  • Client extraction code: XTJN
  • Client source code
  • Server-side source code