plutoless / eEducation

e-education solutions(Agora Reference Design)
184 stars 124 forks source link

login failure, please check your network #157

Closed alexwenbj closed 4 years ago

alexwenbj commented 4 years ago

I used the web demo as following:

  1. Got the App ID;
  2. Got the customer ID and customer certificate from https://console.agora.io/restfulApi;
  3. Generate the REACT_APP_AGORA_RESTFULL_TOKEN with Java code as below:
    import java.util.Base64;
    import java.util.Base64.Decoder;
    public class C{
    public static void main(String[] args){
        String plainCredentials = "my customer ID:my customer certificate";
        String base64Credentials = new String(Base64.getEncoder().encodeToString(plainCredentials.getBytes()));
        System.out.println(base64Credentials);
    }
    }
  4. Put the base64 encrypt code to the REACT_APP_AGORA_RESTFULL_TOKEN
  5. run npm run dev
  6. In the open page, input the information and click the button, and got the error message "login fail,please check your network",in the console log, I got the log: fetch.ts:32 POST https://api.agora.io/edu/v1/apps/73f8eb931098411988249ac93737cf5f/room/entry 401 (Unauthorized) fetchRequest @ fetch.ts:32 (anonymous) @ fetch.ts:38 Fetch @ fetch.ts:9 AgoraFetch @ fetch.ts:49 AgoraFetchJson @ edu-api.ts:49 entry @ edu-api.ts:254 Login @ edu-api.ts:470 LoginToRoom @ room.ts:632 handleSubmit @ home.tsx:102 callCallback @ react-dom.development.js:189 invokeGuardedCallbackDev @ react-dom.development.js:238 invokeGuardedCallback @ react-dom.development.js:291 invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js:306 executeDispatch @ react-dom.development.js:391 executeDispatchesInOrder @ react-dom.development.js:416 executeDispatchesAndRelease @ react-dom.development.js:3300 executeDispatchesAndReleaseTopLevel @ react-dom.development.js:3309 forEachAccumulated @ react-dom.development.js:3281 runEventsInBatch @ react-dom.development.js:3326 runExtractedPluginEventsInBatch @ react-dom.development.js:3536 handleTopLevel @ react-dom.development.js:3580 batchedEventUpdates$1 @ react-dom.development.js:21726 batchedEventUpdates @ react-dom.development.js:798 dispatchEventForLegacyPluginEventSystem @ react-dom.development.js:3590 attemptToDispatchEvent @ react-dom.development.js:4310 dispatchEvent @ react-dom.development.js:4231 unstable_runWithPriority @ scheduler.development.js:656 runWithPriority$1 @ react-dom.development.js:11076 discreteUpdates$1 @ react-dom.development.js:21743 discreteUpdates @ react-dom.development.js:811 dispatchDiscreteEvent @ react-dom.development.js:4210 index.ts:71 Error: Unauthorized at onResponse (fetch.ts:12) What is the problem with it?I have check the issue #143 #153 ,and enclose all the 4 IDs(App ID,Customer ID,Customer certificate and the generated base64 token) with double quotes. Thank you.
srs888001 commented 4 years ago

it looks like the REACT_APP_AGORA_RESTFULL_TOKEN generation error. Maybe you can use it in the browser console: window.btoa ("customer ID:customer certificate") to generate the base64 code

alexwenbj commented 4 years ago

@srs888001 Thank you , but it still not worked, and it seems the base64 code generated in your way is the same as my Java code.

srs888001 commented 4 years ago

Can you paste the request parameters of the wrong request?

alexwenbj commented 4 years ago

@srs888001

{userName: "nnn", roomName: "r1111", role: 1, type: 1, roomUuid: "r1111",…}
role: 1
roomName: "r1111"
roomUuid: "r1111"
type: 1
userName: "nnn"
userUuid: "10e6ebeb-02bf-4537-b621-f35a9d6ff90c"
srs888001 commented 4 years ago

what's the request header? And can you upload the log? There is a button to upload the log in the upper right corner of the web page.

alexwenbj commented 4 years ago

Uploaded the log, and the request header is:

POST /edu/v1/apps/73f8eb931098411988249ac93737cf5f/room/entry HTTP/1.1
Host: api.agora.io
Connection: keep-alive
Content-Length: 125
Authorization: Basic agora_restful_api_token
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.97 Safari/537.36
Content-Type: application/json
Accept: */*
Origin: http://localhost:3000
Sec-Fetch-Site: cross-site
Sec-Fetch-Mode: cors
Sec-Fetch-Dest: empty
Referer: http://localhost:3000/
Accept-Encoding: gzip, deflate, br
Accept-Language: en,zh-CN;q=0.9,zh;q=0.8,sm;q=0.7,la;q=0.6
srs888001 commented 4 years ago

Have you rename .env.example to .env.local and replaced agora_restful_api_token with the the generated code ?

alexwenbj commented 4 years ago

Yes,I renamed it and replaced the token with the generated code.

srs888001 commented 4 years ago

But I see no replacement in your network request. Iust like Authorization: Basic agora_restful_api_token.

alexwenbj commented 4 years ago

Yeah,I just saw the reqeust header Authorization is still the unconfigured one, but in fact I renamed the .env.example to .env.local and replaced the token. image image

Matrixbirds commented 4 years ago

Did u use cache-loader in config-overrides.js? I guess your bundle hit cache file, you can try to remove node_modules/.cache then rebuild again.

alexwenbj commented 4 years ago

@Matrixbirds Yes, you are right! Thank you!