Open Closed

please help me to connect abp react app with microservice architecture APIs, #7474


User avatar
0
asingh created

Hi ,

I have downloaded the abp solution with react solution,. the default template is abp react solution with monolithic mvc and maui blazor , so i am successfully logging the monolithic way. but when i am trying to integrate the Auth server of Microservices , i am not able to . do you have any default template , solution , project structure for it.?

i have taken help of this ticket refrence https://support.abp.io/QA/Questions/6827/How-do-i-connect-to-auth-server-and-micro-services-apis-with-react-native, but it is not working.

Note: could you provide me the sample solution or sample project for it.


23 Answer(s)
  • User Avatar
    0
    maliming created
    Support Team Fullstack Developer

    hi

    but when i am trying to integrate the Auth server of Microservices , i am not able to .

    What problem do you get? Can you share the error logs if you have them?

  • User Avatar
    0
    asingh created

    hello , thanks for replying

    technically it should come like this

    but when i am following this ticket , https://support.abp.io/QA/Questions/6827/How-do-i-connect-to-auth-server-and-micro-services-apis-with-react-native ( please go through once )

    then i am getting the same error which they were getting .. .

    also , when I am trying to do this way.

    I am getting this error.

    do you want the error logs of API side (auth server) or react native side which i already gave you.

    quick response will be appreciated.

  • User Avatar
    0
    maliming created
    Support Team Fullstack Developer

    hi

    Please share the Logs.txt file of API side (auth server) website.

    Thanks.

    liming.ma@volosoft.com

  • User Avatar
    0
    asingh created

    since it's not getting connected and throwing error, i am showing you the log.text for authserver

    https://drive.google.com/file/d/13CBz1feNfnqA29CLJ7i9fY6_fFxfSTnC/view?usp=drive_link

  • User Avatar
    0
    maliming created
    Support Team Fullstack Developer

    hi

    Please delete the Logs.txt file first, change your log level to Debug, reproduce, and then share again.

    Thanks

    public class Program
    {
        public async static Task<int> Main(string[] args)
        {
            Log.Logger = new LoggerConfiguration()
                .MinimumLevel.Debug()
                .MinimumLevel.Override("Microsoft.EntityFrameworkCore", LogEventLevel.Warning)
                .Enrich.FromLogContext()
                .WriteTo.Async(c => c.File("Logs/logs.txt"))
                .WriteTo.Async(c => c.Console())
                .CreateLogger();
    
  • User Avatar
    0
    asingh created

    i did what you said but nothing is coming in the logs now

  • User Avatar
    0
    maliming created
    Support Team Fullstack Developer

    hi

    That's strange. There must be logs for 400 error.

  • User Avatar
    0
    asingh created

    the above3 screenshot we are getting when we are trying to connect the api urls of QA . i am giving you the log files when we are running the microservices in local . at local its not even connecting and for local we are getting this error .

  • User Avatar
    0
    maliming created
    Support Team Fullstack Developer

    hi

    Can you share the QA environment application logs?

    at local its not even connecting and for local we are getting this error .

    I have to see the logs to troubleshoot the problem.

  • User Avatar
    0
    asingh created

    can't i just load it in local , because lot of people are using qa at the moment and to get the log of qa , everyone has to stop and then i have to log. How can i do the same thing for local.? suppose i am running the microservices on my local? how i will i connect to auth server in that scenario. how those microservices apis will be connected to react environment file , so that i could get the expected login screen successfully.

    this is my environment.ts file..

    this is my auth server url: https://qa.doctrz.in:44322/Account/Login

    this is our gateway url

    https://qa.doctrz.in:44325/

    now i am giving you our react environment js file.

    const yourIP = ' 192.168.1.12'; // See the docs https://docs.abp.io/en/abp/latest/Getting-Started-React-Native?Tiered=No const port = 44305; const apiUrl = http://${yourIP}:${port};

    const ENV = { dev: { apiUrl, appUrl: exp://${yourIP}:19000, oAuthConfig: { issuer: apiUrl, clientId: 'ABPMVC_Mobile', scope: 'offline_access ABPMVC', }, localization: { defaultResourceName: 'ABPMVC', }, }, prod: { apiUrl, appUrl: exp://${yourIP}:19000, oAuthConfig: { issuer: 'http://localhost:44315', clientId: 'ABPMVC_Mobile', scope: 'offline_access ABPMVC', }, localization: { defaultResourceName: 'ABPMVC', }, }, };

    export const getEnvVars = () => { // eslint-disable-next-line no-undef return DEV ? ENV.dev : ENV.prod; };

    if, you could try on your system and check whether it is working [you can try with our qa gateway url and auth server url] , so that later i will modify the environment.js file according to your project solution.

    elseif,

    you have any react native sample solution which works with microservices template then, please send to me. that would be a great help.

    elseif, atleast give me the proper documentation.

  • User Avatar
    0
    maliming created
    Support Team Fullstack Developer

    hi

    Can you get the logs at a later date?

    Because there are detailed error reasons in the logs

  • User Avatar
    0
    asingh created

    i will try , I have to seek permission of senior solution architect and many approvals for that , that might take sometime, that's why i was requesting you to create the sample solution with our gateway urls and auth server urls or could create a sample solution on local to connect react app with microservices

  • User Avatar
    0
    asingh created

    Hi again, we are able to login successfully into qa .

    now can you tell me how to set up the development environment for local , so that we could connect the microservices with login screen for local development.

    also could you tell me which IP should be used for local host development , so that it will get connected to the emulator .?

    will be waiting for the quick reply

  • User Avatar
    0
    maliming created
    Support Team Fullstack Developer

    hi

    If this document can't help, I will ask our front team.

    https://docs.abp.io/en/abp/latest/Getting-Started-React-Native?Tiered=Yes

  • User Avatar
    0
    asingh created

    Hi actually we followed the documentation but we are unable to configure the microservices api, with this documentation . please tell me if this documentation is valid in case of connection with our auth server microservices architecture . the documentation you gave is to configure the monolithic architecture. if you could please assist us in that case, as we are able to work in monolithic way but facing issues in troubleshooting the microservices architecture.

  • User Avatar
    0
    maliming created
    Support Team Fullstack Developer

    hi

    I will ask our angular team. Please wait a moment.

    Thanks.

  • User Avatar
    0
    asingh created

    hi again, since we are trying to set our project on local environment , we are getting these logs,

    log

    as soon as we are clicking the login button we are getting this error.

    .

    please send us the detail solution

  • User Avatar
    0
    maliming created
    Support Team Fullstack Developer

    hi

    The authorization request was rejected because the application 'ReactG1' was not allowed to use the 'AccountService' scope.

    Please check the scopes of the ReactG1

  • User Avatar
    0
    asingh created

    how to call , our backend API by using our web gateway? how to configure it. we have our gateway url for for our API, ? how and where to integrate it???

    this log link log.txt

  • User Avatar
    0
    maliming created
    Support Team Fullstack Developer

    hi

    Our angular team will reply asap.

    Sorry for that.

  • User Avatar
    0
    asingh created

    but when can i expect , we are already running late in the development , could please ask them to expedite the process? its my humble request

  • User Avatar
    0
    asingh created

    any update from the angular team? as we are stucked here . your assist and support will be appreciated .

  • User Avatar
    0
    masum.ulu created
    Support Team Angular Expert

    Hi asingh,

    We don't have proxy generation for React Native UI with ABP CLI. That's why we suggest that you can use api folder for your service request. You can use smilar request method in IdentityAPI.js or others.

    Example

    //API.js (This file already exits under the api folder)
    import axios from 'axios';
    import { getEnvVars } from '../../Environment';
    
    const { apiUrl } = getEnvVars();
    
    const axiosInstance = axios.create({
      baseURL: apiUrl,
      withCredentials: false,
    });
    
    export default axiosInstance;
    
    
    //ProductsAPI.js (Example API js file for service request)
    
    import api from './API';
    
    export const getProducts = () => api.get('/api/app/products').then(({ data }) => data.items);
    
Made with ❤️ on ABP v9.1.0-preview. Updated on December 13, 2024, 06:09