Bir önceki yazımda kurduğumuz template üzerinden gideceğiz. Web apiye ilk erişimizi login ile olacak. Web Apiyi .net core ile geliştirdim. Jwt token kullanıyor. Refresh token ile güvenliğimizi biraz daha artırıyoruz.
Öncelikli olarak erişim için Axios kullanacağız. Bunun için package.jsonda olmadığı için kurulum ile başlayacağız.
npm install axios
Artık kurulumuzu yaptık, isteklerimizi bu kütüphane ile yapacağız. Geçici olarak template ile gelen login sayfasını kullanacağız. (src/views/pages/login/Login.js) Kodu aşağıda ki gibi düzenleylim.
import React, { Component } from "react";
import { Link } from "react-router-dom";
import {
CButton,
CCard,
CCardBody,
CCardGroup,
CCol,
CContainer,
CForm,
CInput,
CInputGroup,
CInputGroupPrepend,
CInputGroupText,
CRow,
} from "@coreui/react";
import CIcon from "@coreui/icons-react";
import axios from "axios";
export default class Login extends Component {
constructor(props) {
super(props);
this.state = {
username: "",
password: "",
};
}
handleChange(e) {
const targetName = e.target.name;
const targetValue = e.target.value;
if (targetName === "username") {
this.username = targetValue;
} else if (targetName === "password") {
this.password = targetValue;
}
}
async onClickBtnGirisYap(e) {
e.preventDefault();
const name = this.state.username;
const pass = this.state.password;
alert("Servis Bağlantısı Buradan ");
return true;
}
//Setter
set username(value) {
this.setState({
username: value,
});
}
set password(value) {
this.setState({
password: value,
});
}
render() {
return (
<div className="c-app c-default-layout flex-row align-items-center">
<CContainer>
<CRow className="justify-content-center">
<CCol md="8">
<CCardGroup>
<CCard className="p-4">
<CCardBody>
<CForm>
<h1>Login</h1>
<p className="text-muted">Sign In to your account</p>
<CInputGroup className="mb-3">
<CInputGroupPrepend>
<CInputGroupText>
<CIcon name="cil-user" />
</CInputGroupText>
</CInputGroupPrepend>
<CInput
type="text"
name="username"
placeholder="Username"
autoComplete="username"
value={this.state.username}
onChange={this.handleChange.bind(this)}
/>
</CInputGroup>
<CInputGroup className="mb-4">
<CInputGroupPrepend>
<CInputGroupText>
<CIcon name="cil-lock-locked" />
</CInputGroupText>
</CInputGroupPrepend>
<CInput
type="password"
name="password"
placeholder="Password"
autoComplete="current-password"
value={this.state.password}
onChange={this.handleChange.bind(this)}
/>
</CInputGroup>
<CRow>
<CCol xs="6">
<CButton
color="primary"
className="px-4"
onClick={this.onClickBtnGirisYap.bind(this)}
>
Login
</CButton>
</CCol>
<CCol xs="6" className="text-right">
<CButton color="link" className="px-0">
Forgot password?
</CButton>
</CCol>
</CRow>
</CForm>
</CCardBody>
</CCard>
<CCard
className="text-white bg-primary py-5 d-md-down-none"
style={{ width: "44%" }}
>
<CCardBody className="text-center">
<div>
<h2>Sign up</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing
elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua.
</p>
<Link to="/register">
<CButton
color="primary"
className="mt-3"
active
tabIndex={-1}
>
Register Now!
</CButton>
</Link>
</div>
</CCardBody>
</CCard>
</CCardGroup>
</CCol>
</CRow>
</CContainer>
</div>
);
}
}
onClickBtnGirisYap fonksiyonun altında bağlantı sağlayabilirsiniz. Geçici olarak aşağada ki kod bloğundan bağlantıyı sağlayabilirsiniz. Bir sonra ki yazımda api erişimini sağlayacak class yapısını yapacağız.
let istek = {
grantType: "authorization_code",
clientId: "xxxxxx",
refreshToken: null,
usernameEmail: "",
password: "",
};
let axiosConfig = {
headers: {
"Content-Type": "application/json;charset=UTF-8",
"Access-Control-Allow-Origin": "*",
},
};
axios
.post(
"https://xxxx/tokens",
istek,
axiosConfig
)
.then((res) => {
console.log("RESPONSE RECEIVED: ", res);
const cevap = res.data;
if (cevap.success) {
alert(cevap.body.accessToken);
}
})
.catch((err) => {
console.log("AXIOS ERROR: ", err);
});