Author: Mubarak Hossain

Laravel API POST methods request return a 419 status code when we browser by dev server.

Post author By Mubarak Hossain
Post date September 11, 2023

If the browser cannot access the Laravel API post routes at localhost, it will always return an HTTP 419 error status, with the CSRF token mismatch exception. We need to changes in the Laravel app/Http/Middleware/VerifyCsrfToken.php file.

This code is located in the handle method of the parent class of VerifyCsrfToken.php, which is found at vendor/laravel/framework/src/Illuminate/Foundation/Http/Middleware/VerifyCsrfToken.php.

/**
     * Handle an incoming request.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  \Closure  $next
     * @return mixed
     *
     * @throws \Illuminate\Session\TokenMismatchException
     */
    public function handle($request, Closure $next)
    {
        if (
            $this->isReading($request) ||
            $this->runningUnitTests() ||
            $this->inExceptArray($request) ||
            $this->tokensMatch($request)
        ) {
            return tap($next($request), function ($response) use ($request) {
                if ($this->shouldAddXsrfTokenCookie()) {
                    $this->addCookieToResponse($request, $response);
                }
            });
        }

        throw new TokenMismatchException('CSRF token mismatch.');
    }

    /**
     * Determine if the HTTP request uses a ‘read’ verb.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return bool
     */
    protected function isReading($request)
    {
        return in_array($request->method(), ['HEAD', 'GET', 'OPTIONS']);
    }

Solution: Simply add the isReading() method to the file verifyCsrfToken.php to enable the POST method.

<?php

namespace App\Http\Middleware;

use Illuminate\Foundation\Http\Middleware\VerifyCsrfToken as Middleware;

class VerifyCsrfToken extends Middleware
{
    /**
     * The URIs that should be excluded from CSRF verification.
     *
     * @var array<int, string>
     */
    protected $except = [
        //
    ];

    /**
     * @param $request
     * @return bool
     */
    protected function isReading($request): bool
    {
        return in_array($request->method(), ['HEAD', 'GET', 'OPTIONS', 'POST']);
    }
}

Tags Error, Laravel

How can we setup the Google APIs Client Library in Laravel 10?

Post author By Mubarak Hossain
Post date September 5, 2023

Setting up the Google APIs Client Library and access using Service Account in Laravel involves several steps. This library allows you to integrate various Google APIs, such as Google Drive, Google Sheets, etc., into your Laravel application. Here’s a step-by-step guide to help you set it up:

Note: Before you begin, make sure you have Composer installed and your Laravel project is up and running.

Create a New Laravel Project (Optional):

composer create-project --prefer-dist laravel/laravel PROJECT_NAME
cd PROJECT_NAME

Install Google API Client Library:

Use Composer to install the Google APIs Client Library

composer require google/apiclient:^2.15.0

Create Google API Project and Get Credentials:

Go to the Google Cloud Console.
Create a new project or use an existing one.

Enable the Required API:

In the Cloud Console, navigate to the “APIs & Services” > “Library” section.
Search for the API you want to use (e.g., Google Sheets, Google Drive) and enable it for your project.

Create a Service Account:

In the Cloud Console, navigate to the “APIs & Services” > “Credentials” section.
Click on “Create credentials” and select “Service account key.”
Follow the prompts to create a new service account. Give it a name and assign it the necessary permissions based on the API you’re using (e.g., Editor or Viewer access).
Download the JSON key file for the service account. This file will be used in your Laravel project.

More details google developers console to generate service-account credentials.

Upload your service account json file to “storeage/app/public/service-account.json” directory.

Configure Laravel Environment:

Open your Laravel project’s .env file and add the following lines, replacing the placeholders with your actual credentials:

GOOGLE_SERVICE_ACCOUNT_JSON="app/public/service-account.json"
GOOGLE_DRIVE_FOLDER="SHARED_DRIVE_FOLDER_ID"

//https://drive.google.com/drive/folders/58sAF4vQLgAyjSUk9PVA
// (58sAF4vQLgAyjSUk9PVA) SHARED_DRIVE_FOLDER_ID

Assign google Service Account config:

//config/app.php

/*
|--------------------------------------------------------------------------
| Application google Service Account config
|--------------------------------------------------------------------------
*/
'google_key_path' => env('GOOGLE_SERVICE_ACCOUNT_JSON', null),
'drive_folder_id' => env('GOOGLE_DRIVE_FOLDER', null),

Create Routes and Controllers:

// routes/web.php
Route::get('drive/all/files', 'GoogleClientController@getAllFilesFromDriveFolder');

// app/Http/Controllers/GoogleClientController.php
namespace App\Http\Controllers;

use Illuminate\Http\Request;


class GoogleClientController extends Controller
{
    public function getAllFilesFromDriveFolder()
    {
		try {
			$folderId = config('app.drive_folder_id');
			
			// Create a new Google Client instance
            $client = new \Google\Client();
            $client->setAuthConfig(config('app.google_key_path'));
			$client->addScope(\Google\Service\Drive::DRIVE);
            $client->setIncludeGrantedScopes(true);
            $service = new \Google\Service\Drive($client);

            $optParams = array(
                'pageSize' => 100,
                'includeItemsFromAllDrives' => true,
                'supportsAllDrives' => true,
                'fields'=>'nextPageToken, files(id, name)',
                'q' => "'". $folderId ."' in parents and trashed=false"
            );
            $response = $service->files->listFiles($optParams);

            return $response->getFiles();
        } catch(Exception $e) {
            echo "Error Message: ".$e;
        }
    }		
}

Test Your Application:

Access the application in your browser and navigate to the http://sitedomain.com/drive/all/files route to get list of all files and folder.

Tags Google Drive Api, Laravel

Others

How to create a subdomain and link with in Cloudflare?

Post author By Mubarak Hossain
Post date June 30, 2022

In this article I will discuses how create and pointing a new subdomain if your existing domain is configure and point to Cloudflare.

Subdomain link with Cloudflare

First you want to create subdomain in Namecheap, Siteground, Godaddy or your existing hosting server. It’s requires you to add the CNAME record on Cloudflare pointing to your registered domain.

Login into your Cloudflare account, click on the active domain in which you need to create this subdomain. Click on DNS from left menu and click on Add record button.

Enter the subdomain as the name for instance add “staging” (or what you want) name here. In the target add your registered domain name example yourdomain.com

Finally click on Save button.

Cloudflare is quick you should be able to reach the sub domain as soon as (within 10 or 20 minutes) you added.

Thank you for carefully read my article If you have any query please Leave your query on following comment section or contact with us. Hope it will help you.

Tags Cloudflare, Subdomain

Laravel

Laravel – Failed to authenticate on SMTP server with username using 3 possible authenticators

Post author By Mubarak Hossain
Post date June 29, 2022

If you still get following error (Failed to authenticate on SMTP server with username) when sending email please follow below steps.

Swift_TransportException

Failed to authenticate on SMTP server with username “yourid@gmail.com” using 3 possible authenticators. Authenticator LOGIN returned Expected response code 235 but got code “535”, with message “535-5.7.8 Username and Password not accepted. Learn more at 535 5.7.8 https://support.google.com/mail/?p=BadCredentials c17-20020a170902d49100b001624cd63bbbsm4334145plg.133 – gsmtp “. Authenticator PLAIN returned Expected response code 235 but got code “535”, with message “535-5.7.8 Username and Password not accepted. Learn more at 535 5.7.8 https://support.google.com/mail/?p=BadCredentials c17-20020a170902d49100b001624cd63bbbsm4334145plg.133 – gsmtp “. Authenticator XOAUTH2 returned Expected response code 250 but got code “535”, with message “535-5.7.8 Username and Password not accepted. Learn more at 535 5.7.8 https://support.google.com/mail/?p=BadCredentials c17-20020a170902d49100b001624cd63bbbsm4334145plg.133 – gsmtp “.

Step 1:

Please login into your gmail account and click on “Manage your Google Account” button form right to your profile picture.

Step 2:

Go to to Security tab form left menu and please turn on 2-Step Verification by using your Recovery Phone.

Step 3:

Click on App Password bar form Sign in to Google section.

Step 4:

Select the app and device you want to generate the app password for. And enter a platform name and click on GENERATE button to generate new password.

Finally copy your new generated password and save it your self also use it to your other device or app where you want to send SMTP email.

Step 5:

Now change password on Laravel .env file MAIL_PASSWORD value with new generated password.

MAIL_DRIVER=smtp
MAIL_HOST=smtp.gmail.com
MAIL_PORT=465
MAIL_USERNAME="youremailid@gmail.com"
MAIL_PASSWORD="xmdiprjyrzexshbd" //New generated password here
MAIL_ENCRYPTION=ssl
MAIL_FROM_ADDRESS="admin@yourdomain.com"
MAIL_FROM_NAME="${APP_NAME}"

Thank you for carefully read my article If you have any query please Leave your query on following comment section or contact with us. Hope it will help you.

Tags Error, Laravel, Send email, SMTP

React Native

React Native – EventEmitter removeListener Method has been deprecated

Post author By Mubarak Hossain
Post date March 12, 2022

Warning: Receiving warning on the console.

removeListener Method has been deprecated

EventEmitter.removeListener(‘appStateDidChange’, …): Method has been deprecated. Please instead use remove() on the subscription returned by EventEmitter.addListener.
EventEmitter.removeListener(‘appStateDidChange’, …): Method has been deprecated. Please instead use remove() on the subscription returned by EventEmitter.addListener.
EventEmitter.removeListener(‘appStateDidChange’, …): Method has been deprecated. Please instead use remove() on the subscription returned by EventEmitter.addListener.

React Native Version 0.65+, removeListener is depreciated. You can use remove() isntead of removeListener

Example of React Native useEffect:

React.useEffect(() => {
	const subscription = AppState.addEvenListener('change', ()=> {
		//Your code here...
	});
	
	return () => {
		subscription.remove()
	}
}, [])

Another way to escape this warning

If you are sure that the deprecated use is happening in a dependency you cannot control, it is possible to silence these warnings. In your App.tsx or somewhere else add LogBox on that screen.

import { LogBox } from "react-native";

LogBox.ignoreLogs(["EventEmitter.removeListener"]);

Thank you for carefully read my article If you have any query please Leave your query on following comment section or contact with us. Hope it will help you.

Tags Deprecated, Error, Event, React Native, Warning

React Native

React Native – Take a Tour – App Tour – Tap Target View

Post author By Mubarak Hossain
Post date March 6, 2022

React Native Take a Tour – App Tour – Tap Target View library. This library is a React Native bridge around android and ios app tour libraries. Supported RN >= 0.61

In this article I have discuses how to show Tap Target View on React Native project Function based component. Please follow below steps to implement example code for Tap Target View on function based component.

Android: KeepSafe/TapTargetView
An implementation of tap targets from Google’s Material Design guidelines on feature discovery.

iOS: aromajoin/material-showcase-ios
An elegant and beautiful tap showcase view for iOS apps based on Material Design Guidelines.

Run following command to Install

npm install react-native-app-tour --save

After install react-native-app-tour I call event emitter DeviceEventEmitter

import { …, DeviceEventEmitter } from 'react-native';

Now, we need to import react-native-app-tour module with below code.

import { AppTour, AppTourView, AppTourSequence } from 'react-native-app-tour';

Now define appTourSequence

let appTourSequence = new AppTourSequence();

Now we need to configure props for app tour targets.

let tourOneProps = {
order: 1,
title: "What is Lorem Ipsum?",
description: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s",
outerCircleColor: '#f24481',
titleTextSize: 22,
titleTextColor: '#ffffff',
descriptionTextSize: 14,
descriptionTextColor: '#ffffff',
}

let tourTwoProps = {
order: 2,
title: "Why do we use it?",
description: "It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters",
outerCircleColor: '#f24481',
titleTextSize: 22,
titleTextColor: '#ffffff',
descriptionTextSize: 14,
descriptionTextColor: '#ffffff',
}

Now configure and add view targets to appTourSequence. Here is example for view ref props like “ref={ref => this.payoutListMenuRef = ref}“

React.useEffect(() => {
	setTimeout(() => {
		let exampleOneViewRef = this.exampleOneViewRef;
		if(exampleOneViewRef!=null){
			let exampleOneTourTarget = AppTourView.for(this.exampleOneViewRef, {...tourOneProps});
			appTourSequence.add(exampleOneTourTarget);
		}
		
		let exampleTwoViewRef = this.exampleTwoViewRef;
		if(exampleTwoViewRef!=null){
			let exampleTowTourTarget = AppTourView.for(this.exampleTwoViewRef, {...tourTwoProps});
			appTourSequence.add(exampleTowTourTarget);
		}

		AppTour.ShowSequence(appTourSequence);
	}, 1000);
}, []);

When finish app tour sequence, we can execute our own code by using below onFinishSequenceEvent event.

React.useEffect(() => {
	const subscription = DeviceEventEmitter.addListener('onFinishSequenceEvent', (e: Event) => {
		if(e.finish===true){
			appTourSequence.removeAll();
			
			//Add your code here
		}
	});

	return () => subscription.remove();
}, []);

React Native App Tour View full Example code. You can move the code on your own created screen.

Tags App Tour, React Native, Take a Tour, Tap Target View

React Native

React Native – Deep linking example for Android and IOS

Post author By Mubarak Hossain
Post date January 18, 2022

In this article I will discuses how to configure Deep Link on React Native application. React Native provides a Linking to get notified of incoming links. React Navigation can integrate with the Linking module to automatically handle deep links. Deep linking and universal links are gateway into your mobile application.

Configure Deep Link on React Native Application:

Very first, you want to specify a scheme URL for your app. If your app scheme is appname then a link to your app would be appname://

URL scheme for your app:

Open your Android app manifest android/app/src/main/AndroidManifest.xml you need to add following code between activity and queries tags section.

<manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.appname">
.....................
.....................
.....................
<application
	.....
	.....
	>
	<activity
		android:name=".MainActivity"
		android:label="@string/app_name"
		android:configChanges="keyboard|keyboardHidden|orientation|screenSize|uiMode"
		android:launchMode="singleTask"
		android:windowSoftInputMode="stateAlwaysHidden|adjustPan">
			<intent-filter android:autoVerify="true">
				<action android:name="android.intent.action.MAIN" />
				<category android:name="android.intent.category.LAUNCHER" />
			</intent-filter>
			<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:scheme="appname" />
				<data android:scheme="https" android:host="appndomain.com" />
			</intent-filter>
	</activity>
	.........
	.........
</application>
    <queries>
        <intent>
            <action android:name="android.intent.action.VIEW" />
            <data android:scheme="https" android:host="*" />
        </intent>
    </queries>
</manifest>

Now configure the native iOS app to open based on the appname:// URI scheme. You need to add the following lines to ios/AppName/AppDelegate.m file.

// Add the header at the top of the file:
#import <React/RCTLinkingManager.h>

// Add this above `@end`:
- (BOOL)application:(UIApplication *)application
   openURL:(NSURL *)url
   options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options
{
  return [RCTLinkingManager application:application openURL:url options:options];
}

After this change you need to re-build app “react-native run-android” or “react-native run-ios”

App Links Configure:

Here is configure app initial route and others screens with query params.

export const linkConfig = {
	initialRouteName: "Home",
	screens: {
		screens: {
			Home: {
				path: "Home",
			},
			Notification: {
				path: "Notification/:id?",
				parse: {
					id: (id: String) => `${id}`,
				},
			},
		}
	}
};

Configure App Linking:

const linking = {
    prefixes: ['https://yourdomin.com', 'appname://'],
    linkConfig,
    async getInitialURL() {
        // Check if app was opened from a deep link
        const url = await Linking.getInitialURL();

        if (url != null) {
            return url;
        }
    }
};

Here is full example code for setup on App screen.

import React from 'react';
import { Linking} from 'react-native';
import { NavigationContainer } from '@react-navigation/native';

export const linkConfig = {
	initialRouteName: "Home",
	screens: {
		screens: {
			Home: {
				path: "Home",
			},
			Notification: {
				path: "Notification/:id?",
				parse: {
					id: (id: String) => `${id}`,
				},
			},
		}
	}
};

const linking = {
    prefixes: ['https://yourdomin.com', 'appname://'],
    linkConfig,
    async getInitialURL() {
        // Check if app was opened from a deep link
        const url = await Linking.getInitialURL();

        if (url != null) {
            return url;
        }
    }
};

const App = ({ navigation }) => {
	return (
		<NavigationContainer linking={linking} fallback={<Text>Loading...</Text>}>
			{/* content */}
		</NavigationContainer>
	);
}

export default App;

Test Deep Linking on IOS and Android:

//Android Test:
npx uri-scheme open appname://Notification/?id=102 --android

//IOS Test:
npx uri-scheme open appname://Notification/?id=102 --ios

Tags Android, IOS, Linking, React Native

Magento 2

Magento error – Unable to apply data patch for module Magento_Theme. In Gd2.php line 72

Post author By Mubarak Hossain
Post date January 2, 2022

In PatchApplier.php line 170: Unable to apply data patch Magento\Theme\Setup\Patch\Data\RegisterThemes for module Magento_Theme. Original exception message: Wrong file

In Gd2.php line 72: Wrong file

Finally Installation is complete 100% after done following changes:

Find validateURLScheme function in vendor\magento\framework\Image\Adapter\Gd2.php file. at line 96. Replace function with this: !file_exists($filename) Please find and change validateURLScheme function like below code.

Just add && !file_exists($filename)

private function validateURLScheme(string $filename) : bool
{
	$allowed_schemes = ['ftp', 'ftps', 'http', 'https'];
	$url = parse_url($filename);
	if ($url && isset($url['scheme']) && !in_array($url['scheme'], $allowed_schemes) && !file_exists($filename)) {
		return false;
	}
	
	return true;
}

Thank you for carefully read my article If you have any query please Leave your query on following comment section or contact with us. Hope it will help you.

Tags Error, Install, Magento 2, Theme

Magento 2

Magento error – Could not validate a connection to Elasticsearch and Install using composer

Post author By Mubarak Hossain
Post date January 2, 2022

Download Magento 2

Open SSH terminal on your server and run the following command to download and create new project. Previous post how to install Magento 2 on Windows XAMPP server.

composer create-project --repository-url=https://repo.magento.com/ magento/project-community-edition public_html

Create The Database and Collect other information

Create new database and note Database name, database user name and database user password. Also site url, admin username, password, timezone and more. Run following command to install Magento 2.

Install/Setup Magento 2 by Command line

php bin/magento setup:install \
--base-url="https://www.extendfeature.com/" \
--db-host="localhost" \
--db-name="dbextendfeature" \
--db-user="root" \
--db-password="" \
--admin-firstname="admin" \
--admin-lastname="admin" \
--admin-email="admin@extendfeature.com" \
--admin-user="admin" \
--admin-password="admin@123" \
--language="en_US" \
--currency=USD \
--timezone="Asia/Dhaka" \
--use-rewrites=1

In SearchConfig.php line 81: Could not validate a connection to Elasticsearch. No alive nodes found in your cluster

If you got any error related with Elasticsearch then just disable some module related with Elasticsearch using run following command and again run install command.

//Just disable some module by command
php bin/magento module:disable {Magento_Elasticsearch,Magento_InventoryElasticsearch,Magento_Elasticsearch6,Magento_Elasticsearch7}

Thank you for carefully read my article If you have any query please Leave your query on following comment section or contact with us. Hope it will help you.

Tags Composer, Error, Install, Magento 2

WordPress

How to fix invalid JSON response error in WordPress

Post author By Mubarak Hossain
Post date December 21, 2021

Updating failed. The response is not a valid JSON response.

This error appears when edit and update your posts or pages on your WordPress website. You will see message saying “The response is not a valid JSON response” and updating that page would fail. In this article, I will show you how to fix the invalid JSON error in WordPress.

WordPress needs to communicate with the server while you are editing a post or page form WordPress admin and it getting responses from the web hosting server in the background. This response is in JSON format which is used to quickly transport data using JavaScript.

I getting this error when I move my wordpress website to another server.

Solution:

First please confirm your home and siteurl is ok on database wp_options table.

Please go to Settings => Permalinks page. From here, you need to review the WordPress permalink options. Please select “Post name” option form Permalink Settings and click on the Save Changes button to store your settings.

Also please confirm those code are available on the .htaccess file.

# BEGIN WordPress
# The directives (lines) between "BEGIN WordPress" and "END WordPress" are
# dynamically generated, and should only be modified via WordPress filters.
# Any changes to the directives between these markers will be overwritten.
<ifmodule mod_rewrite.c="">
RewriteEngine On
RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</ifmodule>

# END WordPress

Now site is ready to edit post or page from WordPress admin.

Thank you for carefully read my article If you have any query please Leave your query on following comment section or contact with us. Hope it will help you.

Tags Error, JSON error, WordPress

Create a New Laravel Project (Optional):

Install Google API Client Library:

Create Google API Project and Get Credentials:

Enable the Required API:

Create a Service Account:

Configure Laravel Environment:

Assign google Service Account config:

Create Routes and Controllers:

Test Your Application:

Subdomain link with Cloudflare

Swift_TransportException

Step 1:

Step 2:

Step 3:

Step 4:

Step 5:

removeListener Method has been deprecated

Example of React Native useEffect:

Another way to escape this warning

Run following command to Install

Configure Deep Link on React Native Application:

URL scheme for your app:

App Links Configure:

Configure App Linking:

Test Deep Linking on IOS and Android:

In Gd2.php line 72: Wrong file

Download Magento 2

Create The Database and Collect other information

Install/Setup Magento 2 by Command line

Updating failed. The response is not a valid JSON response.

Solution:

Recent Posts

Categories

Important Links