Invalide Access Token header Twilio可编程语音React Native iOS

Question

我正在尝试使用react-native-twilio-programmable-voice进行语音通话。

它从TwilioVoice.initWithToken(accessToken)表示就绪状态，但是当我调用Twilio.connect()方法时，我在eventlisterner Invalid Access Token header方法中得到了connectionDidDisconnect。我正在使用React Native 0.61.5和react-native-twilio-programmable-voice 3.21.3

[connectionDidDisconnect eventlisterner返回的数据

{
  call_sid: ""
  call_state: "DISCONNECTED"
  error: "Invalid Access Token header"
}

这是我的代码：

import React, { useState, useEffect } from 'react';
import {
    View,
    Text,
    Image,
    TouchableOpacity,
    Platform,
    PermissionsAndroid,
} from 'react-native';
import TwilioVoice from 'react-native-twilio-programmable-voice';
import axios from 'axios';

const Call = () => {
    const [callState, setCallState] = useState('');
    const [twilioInit, setTwilioInit] = useState(false);
    const [name, setName] = useState('');
    const [email, setEmial] = useState('');
    const [calling, setCalling] = useState(false);

    TwilioVoice.addEventListener('connectionDidDisconnect', function(data) {
        console.log(data);
    });

    const getMicrophonePermission = () => {
        const audioPermission = PermissionsAndroid.PERMISSIONS.RECORD_AUDIO;

        return PermissionsAndroid.check(audioPermission).then(async (result) => {
            if (!result) {
                const granted = await PermissionsAndroid.request(audioPermission, {
                    title: 'Microphone Permission',
                    message:
                        'App needs access to you microphone ' +
                        'so you can talk with other users.',
                });
            }
        });
    };

    const getAuthToken = () => {
        const ENDPOINT = 'https://server.com';
        return fetch(`${ENDPOINT}/twilioToken`, {
            method: 'get',
        })
            .then((response) => {
                return response.json();
            })
            .then((data) => {
                return data.token;
            })
            .catch((error) => console.log(error));
    };

    const initlize = async () => {
        if (Platform.OS === 'android') {
            await getMicrophonePermission();
        }
        try {
            const accessToken = await getAuthToken();
            console.log(accessToken);
            const success = await TwilioVoice.initWithToken(accessToken);
            if (Platform.OS === 'ios') {
                TwilioVoice.configureCallKit({
                    appName: 'eSIM2GO',
                });
            }
            setTwilioInit(success);
        } catch (err) {
            console.log(err);
        }
    };

    useEffect(() => {
        initlize();
    }, []);

    const handleCall = async () => {
        // if (!name && !email) {
        //  alert('Enter Credetials');
        // } else {
        //  TwilioVoice.connect({ To: 'number' });
        // }
        TwilioVoice.connect({ To: 'number' });
    };

    return (
        <View
            style={{
                flex: 1,
                justifyContent: 'center',
                alignItems: 'center',
                backgroundColor: '#040b2b',
            }}
        >
            <Image

                source={require('../../assets/free_calls.png')}
                style={{ width: 300, height: 350 }}
            />
            <View>
                <TouchableOpacity
                    style={{
                        marginTop: 30,
                        backgroundColor: 'rgba(240,97,78, 0.5)',
                        paddingHorizontal: 100,
                        paddingVertical: 11,
                        borderRadius: 22,
                    }}
                    onPress={() => handleCall()}
                >
                    <Text
                        style={{
                            color: '#fff',
                            fontFamily: 'Manjari-Regular',
                            fontSize: 20,
                        }}
                    >
                        {calling ? 'Hang Up' : 'Call'}
                    </Text>
                </TouchableOpacity>
            </View>
            <View
                style={{
                    marginVertical: 10,
                }}
            >
                <Text
                    style={{
                        color: '#fff',
                        fontSize: 18,
                        fontFamily: 'Manjari-Regular',
                    }}
                >
                    {twilioInit ? 'Ready' : 'Not Ready'}
                </Text>
            </View>
        </View>
    );
};

export default Call;

这是我的服务器代码以生成令牌

public function twilioToken() {
        $accountSid = '********';
        $authToken  = '********';
        $appSid = '*********';
        $capability = new ClientToken($accountSid, $authToken);
        $capability->allowClientOutgoing($appSid);
        $token = $capability->generateToken(29880);
        return response([
            'successful' => TRUE,
            'token' => $token
        ], 200);
    }

我从xcode获取以下日志

provider:didDeactivateAudioSession

请帮助。

提前感谢

Answer 1

基本上，我所做的是从服务器更改请求访问令牌。根据文档twilio docs

以下代码

$twilioAccountSid = 'ACxxxxxxxxxxxx';
$twilioApiKey = 'SKxxxxxxxxxxxx';
$twilioApiSecret = 'xxxxxxxxxxxxxx';

// Required for Voice grant
$outgoingApplicationSid = 'APxxxxxxxxxxxx';
// An identifier for your app - can be anything you'd like
$identity = "john_doe";

// Create access token, which we will serialize and send to the client
$token = new AccessToken(
    $twilioAccountSid,
    $twilioApiKey,
    $twilioApiSecret,
    3600,
    $identity
);

// Create Voice grant
$voiceGrant = new VoiceGrant();
$voiceGrant->setOutgoingApplicationSid($outgoingApplicationSid);

// Optional: add to allow incoming calls
$voiceGrant->setIncomingAllow(true);

// Add grant to token
$token->addGrant($voiceGrant);

// render token to string
echo $token->toJWT();