Войти с помощью WhatsApp — это новая функция, которая позволяет пользователям входить на веб-сайт или в приложение, используя свою учетную запись WhatsApp вместо OTP.

Решение OTPless «Войти через WhatsApp» уникально, поскольку оно не требует от пользователей ввода своего номера телефона или одноразового пароля (OTP) для входа/регистрации.

Преимущества входа в WhatsApp -

Защитите своих пользователей/Безопасность: держитесь подальше от одноразовых паролей, предотвращайте захват аккаунтов с помощью WhatsApp.

Улучшение взаимодействия с пользователем:беспрепятственный процесс проверки телефона для приятного использования.

Случаи использования, в которых вы можете использовать Войти с помощью WhatsApp -

  • Регистрация: когда пользователь впервые подтверждает свой номер WhatsApp на вашем веб-сайте или в приложении.
  • Вход в систему: когда пользователи возвращаются, чтобы получить доступ к своей существующей учетной записи на вашем веб-сайте или в приложении.

Операционный поток OTPless –

  1. Пользователь нажимает кнопку «Вход в WhatsApp» на странице входа.
  2. Отправляет предварительно заполненное сообщение WhatsApp, и пользователь получает ссылку для подтверждения в ответ на это сообщение.
  3. Ссылка для подтверждения перенаправляет пользователя обратно на ваш сайт или в приложение.

Теперь давайте интегрируем OTPless в ваше приложение React Native 🚀

Шаг 1. Добавьте это в файл AndroidManifest.xml вашего приложения.

<intent-filter>
  <action android:name="android.intent.action.VIEW" />
  <category android:name="android.intent.category.DEFAULT" />
  <category android:name="android.intent.category.BROWSABLE" />
  <data
    android:host="otpless"
    android:scheme="exampleotpless" />
</intent-filter>

android:scheme="exampleotpless" будет названием вашего проекта без одноразовых паролей, за которым следует «otpless».

Шаг 2. Добавьте кнопку «Войти через WhatsApp» на страницу входа в приложение.

<TouchableHighlight
  style={{
    paddingVertical: RFValue(10),
    backgroundColor: '#000',
    borderRadius: RFValue(8),
    borderWidth: RFValue(2),
    borderColor: 'white',
    marginHorizontal: RFValue(16),
  }}
  onPress={handlePress}
  underlayColor="grey">
  <View
    style={{
      flexDirection: 'row',
      justifyContent: 'center',
      alignItems: 'center',
    }}>
    <Icon
      type={Icons.FontAwesome}
      name="whatsapp"
      size={26}
      style={{margin: RFValue(4)}}
    />
    <Text
      style={{
        fontSize: RFValue(15),
        marginStart: RFValue(4),
        textTransform: 'none',
      }}>
      Log in with WhatsApp
    </Text>
  </View>
</TouchableHighlight>

Шаг 3. Перенаправьте пользователя в WhatsApp, чтобы получить ссылку перенаправления.

Чтобы получить URL-адрес перенаправления, сначала создайте свой проект без OTP, посетив здесь. Вы получите идентификатор клиента и секретный идентификатор клиента по почте после успешного создания проекта.

Ниже приведен фрагмент кода JavaScript для перенаправления пользователей в WhatsApp для получения ссылки для подтверждения. Используйте этот код в onClick кнопки входа в WhatsApp.

const handlePress = useCallback(async () => {
  console.log('handle press called ', BASE_URL);
  // Checking if the link is supported for links with custom URL scheme.
  const supported = await Linking.canOpenURL(BASE_URL);

  if (supported) {
    // Opening the link with some app, if the URL scheme is "http" the web link should be opened
    // by some browser in the mobile
    await Linking.openURL(BASE_URL);
  } else {
    Alert.alert(`Don't know how to open this URL: ${BASE_URL}`);
  }
}, [BASE_URL]);

Здесь «BASE_URL» — ваш собственный URI перенаправления. Например -

«example.authlink.me?redirectUri=exampleotpless»

После каждого успешного входа в WhatsApp пользователь перенаправляется обратно на ваш веб-сайт или в приложение с идентификатором WhatsApp. Теперь вы можете определить свой собственный процесс входа/регистрации.

Шаг 4. После того как пользователь успешно прошел проверку подлинности WhatsApp, следующим шагом будет получение ответа «waId».

Скопируйте/вставьте этот код в свой App.js

useEffect(() => {
  const linkingEvent = Linking.addEventListener('url', handleDeepLink);
  Linking.getInitialURL().then(url => {
    if (url) {
      handleDeepLink({url});
    }
  });
  return () => {
    linkingEvent.remove();
  };
}, [handleDeepLink]);

const handleDeepLink = async url => {
  console.log(url);
};

Шаг 5. Получите сведения о пользователе

Теперь у вас есть waId проверенного пользователя. Используйте этот waId, чтобы получить информацию о пользователе, такую ​​как номер и имя WhatsApp.

Для этого вам нужно сделать 1 интеграцию API. Нажмите на конечную точку, чтобы получить информацию о пользователе в ответе.

Конечная точка: «https://example.authlink.me'

import {API} from './axios';

async function getWhatsAppLoggedInUserDetails(waId) {
    const body = {
        waId: waId,
    }

    const res = await API.post('https://example.authlink.me', body, { 
        headers: {'clientId': 'test1234', 
        'clientSecret': 'test1234', 
        'Content-Type': 'application/json'}
      },
    );
  return res.data;
}

export {
    getWhatsAppLoggedInUserDetails,
};

Ответ, который вы получите после попадания в конечную точку -

{
  "data": {
    "timestamp": "2023-02-17T22:54:54.103510Z",
    "userMobile": "917948221313",
    "userName": "User"
  },
  "ok": true,
  "status": "SUCCESS",
  "statusCode": 200,
  "success": true,
  "user": {
    "timestamp": "2023-02-17T22:54:54.103510Z",
    "waId": "test1234",
    "waName": "User",
    "waNumber": "917948221313"
  }
}

Теперь вы можете обрабатывать процесс входа/регистрации на основе этого ответа.

Вот и все. Теперь пользователям вашего приложения не нужно запоминать учетные данные для входа или создавать новую учетную запись, они могут просто использовать свою существующую учетную запись WhatsApp для входа.

Добавление Войти через WhatsApp в ваше приложение/на веб-сайт выполняется быстро и просто за 5 минут :)

Попробуйте Войти через WhatsApp в своем следующем проекте и убедитесь в преимуществах.